Я пытаюсь разместить текст и кнопку поверх изображения, а затем разместить другие компоненты и текст под этим изображением, используя попутный ветер. Я пробовал использовать абсолютное позиционирование, но проблема в том, что изображение больше не занимает вертикальное пространство, и поэтому «Текст под изображением» исчезнет за изображением.
Я хочу что-то похожее на это:
Есть ли способ добиться этого, используя попутный ветер?
🤔 А знаете ли вы, что...
CSS поддерживает разнообразные селекторы, которые позволяют выбирать элементы на веб-странице.
Я думаю, вам следует сгруппировать компоненты, используя <div>. Первая группа компонентов включает изображения, текст и кнопку, вторая группа компонентов включает текст и кнопку «Текст под изображением».
Нравится следующее....
<div className = "relative text-center">
<img
src = "https://hips.hearstapps.com/hmg-prod/images/ground-cover-flowers-1-6477baad1ae88.jpg?crop=1xw:0.675xh;center,top&resize=1200:*"
alt = "img"
/>
<div className = "w-full absolute top-0 left-0 text-center mt-10">
<h2 className = "text-4xl font-bold text-red-500 text-center">
TailwindCSS + React
</h2>
<button className = "mt-10 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Test Button
</button>
</div>
</div>
<div className = "text-center mb-10">
<h2 className = "text-2xl font-bold">Text 2</h2>
<button className = "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Test Button 2
</button>
</div>
Вы можете проверить мой тестовый проект, используя следующий URL. https://codesandbox.io/p/sandbox/epic-feistel-rs237k?file=%2Fsrc%2FApp.js