當我將多個元素設置為“位置：絕對”時，為什麼事情會發生變化？

Question

我是 HTML 和 CSS 新手，所以我希望解釋盡可能簡單 我正在從事前端導師的一個專案

這是相關的 html 內容：

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

這是相關的 CSS 內容：

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

這是我的專案現在的樣子

現在，當我取消註解「perfume-name-container」和「desc-container」類別下的位置宣告時，我的項目如下所示：

在此輸入圖像描述

根據我對定位的理解，所有三個 div 都應該堆疊在一起，但不能向右偏移。發生了什麼事以及我該如何解決它？

我嘗試過使用頂部和左側命令，但它們根本不移動 div

Answer 1

絕對 - 元素絕對定位到其第一個定位的父元素。 相對 - 元素相對於其正常位置定位。

如果你想對齊它們，使用 grid 或 flex 就不需要使用那麼多絕對或相對。

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