Je suis nouveau en HTML et CSS, je veux donc que l'explication soit aussi simple que possible Je travaille sur un projet d'un mentor front-end
Voici le contenu html pertinent :
<div class="info-holder"> <div class="perfume-text-holder"> <p class="perfume-text">PERFUME</p> </div> <div class="perfume-name-container"> <p class="perfume-name">Gabrielle Essence Eau De Parfum</p> </div> <div class="desc-container"> <p class="desc"> A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL. </p> </div>
Voici le contenu CSS pertinent :
.info-holder{ position:relative; } .perfume-text-holder{ position:absolute; } .perfume-text{ color:gray; font-size:14px; letter-spacing:5px; font-family:Montserrat; font-weight: 500; } .perfume-name-container{ position:absolute; } .perfume-name{ font-size:35px; font-family:Fraunces; margin-bottom: 0%; } .desc-container{ position:absolute; } .desc{ font-size:17px; color:gray; font-family:Montserrat; font-weight:500; line-height:25px; }
Voici à quoi ressemble mon projet maintenant
Maintenant, lorsque je décommente la déclaration d'emplacement sous les classes "perfume-name-container" et "desc-container", mon projet ressemble à ceci :
Entrez la description de l'image ici
D'après ma compréhension du positionnement, les trois divs doivent être empilés ensemble, mais pas décalés vers la droite. Que se passe-t-il et comment puis-je y remédier ?
J'ai essayé d'utiliser les commandes haut et gauche mais elles ne déplacent pas du tout le div
Absolu - Un élément est positionné de manière absolue par rapport à son premier élément parent positionné. Relatif - L'élément est positionné par rapport à sa position normale.
Si vous souhaitez les aligner, utilisez la grille ou le flex sans utiliser autant d'absolu ou de relatif.