我是 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
絕對 - 元素絕對定位到其第一個定位的父元素。 相對 - 元素相對於其正常位置定位。
如果你想對齊它們，使用 grid 或 flex 就不需要使用那麼多絕對或相對。
div { display: flex; flex-direction: column; text-align: center; }