Why do things change when I set multiple elements to "position: absolute"?

Question

I'm new to HTML and CSS so I want the explanation to be as simple as possible I'm working on a project from a front-end mentor

This is the relevant html content:

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

This is the relevant CSS content:

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

This is what my project looks like now

Now, when I uncomment the location declaration under "perfume-name-container" and "desc-container" classes, my project looks like this:

Enter image description here

From my understanding of positioning, all three divs should be stacked together, but not offset to the right. What's happening and how can I fix it?

I've tried using the top and left commands but they don't move the div at all

Answer 1

Absolute - An element is positioned absolutely to its first positioned parent element. Relative - The element is positioned relative to its normal position.

If you want to align them, use grid or flex without using so much absolute or relative.

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