当我将多个元素设置为“位置：绝对”时，为什么事情会发生变化？

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