我是 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; }