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