Я пытаюсь создать определенный дизайн. Это дизайн на десктопе и мобильном телефоне:
.section {
width: 100%;
position: relative;
}
.section__inner {
width: 100%;
display: flex;
flex-direction: column;
}
.title {
color: white;
}
.img {
width: 100%;
height: auto;
}
.text-container {
display: flex;
flex-direction: column;
background-color: black;
color: white;
}
@media only screen and (min-width: 768px) {
.section__inner {
width: 175px;
margin-left: auto;
}
.img {
position: absolute;
z-index: -1;
width: 60%;
}
}
<div class = "section">
<div class = "section__inner">
<h1 class = "title">Title</h1>
<img class = "img" src = "https://source.unsplash.com/random/" alt = "random" />
<div class = "text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur cursus ornare risus. Ut sed gravida magna. Mauris in elit imperdiet, porta turpis a, mollis lorem. Nulla consectetur gravida urna, at condimentum dolor.</p>
<p>Suspendisse potenti. Cras malesuada lacus sed malesuada efficitur. Maecenas eros leo, sollicitudin convallis nunc nec, maximus blandit nisi. Cras eleifend nisi id risus vestibulum aliquet. Donec maximus justo at nulla blandit, vel dictum nisi volutpat.
Morbi placerat augue vel libero feugiat, eu venenatis libero aliquet.
</p>
</div>
<button>Go to the link</button>
</div>
</div>
Вот мой codepen с тем, что я разработал до сих пор. Я не понимаю, как я мог расположить эти элементы и какой подход выбрать.
Во-первых, вам нужно установить правильную максимальную ширину и ширину для вашего элемента контейнера и позволить ему центрироваться на экране (в соответствии с дизайном вашего рабочего стола).
Во-вторых, поместите свой .text-container
div слева, чтобы он был над изображением, и, поскольку он уже находится в правильной иерархии, не нужно устанавливать z-index
, и он будет располагаться поверх изображения.
И, наконец, переместите кнопку в .text-container
, чтобы ее можно было расположить вместе с текстом.
Вот обновленная часть CSS:
@media only screen and (min-width: 768px) {
.section {
/* Ensure that enough space is available before 1200px, you can tweak this according to your design */
width: 90%;
/* So the 90% would only apply below this threshold, you can adjust the value as well if needed */
max-width: 1200px;
/* Center this element */
margin: auto;
}
.text-container {
position: absolute;
top: 20%;
left: 50%;
}
.img {
width: 60%;
}
}
<div class = "text-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
cursus ornare risus. Ut sed gravida magna. Mauris in elit imperdiet,
porta turpis a, mollis lorem. Nulla consectetur gravida urna, at
condimentum dolor.
</p>
<p>
Suspendisse potenti. Cras malesuada lacus sed malesuada efficitur.
Maecenas eros leo, sollicitudin convallis nunc nec, maximus blandit
nisi. Cras eleifend nisi id risus vestibulum aliquet. Donec maximus
justo at nulla blandit, vel dictum nisi volutpat. Morbi placerat
augue vel libero feugiat, eu venenatis libero aliquet.
</p>
<button>Go to the link</button>
</div>
Обратите внимание, что при изменении размера изображения оно должно сохранять то же соотношение сторон, что и эталонный дизайн.