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 :
PERFUME
Gabrielle Essence Eau De Parfum
A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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.
div { display: flex; flex-direction: column; text-align: center; }