J'essaie de construire un design spécifique. Voici le design sur ordinateur et mobile :
.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>
C'est mon stylo code avec ce que j'ai développé jusqu'à présent. Je ne comprends pas comment positionner ces éléments et quelle approche adopter.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tout d'abord, vous devez définir la largeur maximale et la largeur correctes pour l'élément conteneur et lui permettre d'être centré sur l'écran (selon la conception de votre bureau)
Deuxièmement, placez le
.text-containerdiv à gauche pour qu'il soit au-dessus de l'image, et comme il est déjà dans la bonne hiérarchie, il n'est pas nécessaire de définir lez-index code> il s'empilera au-dessus de l'imageEnfin, déplacez le bouton vers
.text-containerpour qu'il puisse être positionné avec le texteVoici la section mise à jour de 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%; } }Veuillez noter que lors du redimensionnement de l’image, elle doit conserver le même rapport hauteur/largeur que le design de référence.