Warum ändern sich die Dinge, wenn ich mehrere Elemente auf „Position: absolut“ setze?

Question

Ich bin HTML- und CSS-Neuling und möchte daher, dass die Erklärung so einfach wie möglich ist Ich arbeite an einem Projekt von einem Front-End-Mentor

Dies ist der relevante HTML-Inhalt:

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

Hier ist der relevante CSS-Inhalt:

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

So sieht mein Projekt jetzt aus

Wenn ich nun die Standortdeklaration unter den Klassen „parfüm-name-container“ und „desc-container“ auskommentiere, sieht mein Projekt folgendermaßen aus:

Geben Sie hier eine Bildbeschreibung ein

Nach meinem Verständnis der Positionierung sollten alle drei Divs übereinander gestapelt, aber nicht nach rechts versetzt sein. Was passiert und wie kann ich es beheben?

Ich habe versucht, die oberen und linken Befehle zu verwenden, aber sie verschieben das Div überhaupt nicht

Answer 1

绝对 - 元素绝对定位到其第一个定位的父元素。 相对 - 元素相对于其正常位置定位。

如果你想对齐它们，使用 grid 或 flex 不需要使用那么多绝对或相对。

div {
display: flex;
flex-direction: column;
text-align: center;
 }