Pourquoi les choses changent-elles lorsque je définis plusieurs éléments sur « position : absolue » ?

Question

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

Answer 1

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;
 }