设置多个position:absolute元素后偏移错位问题求助

我是HTML和CSS新手，正在做Frontend Mentor的项目，遇到了绝对定位的问题：

我的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>
</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加上position:absolute后，元素不仅堆叠还向右偏移，而且用top/left属性也没法移动它们，这是怎么回事？

问题原因 #

1. 绝对定位的默认位置逻辑：设置position:absolute的元素会脱离正常文档流，但它的默认位置是「它在正常流中原本应该占据的位置」，不是自动贴到父元素左上角。如果父元素.info-holder本身在页面中有偏移（比如父容器有默认margin/padding，或者.info-holder自己有内边距），那么绝对定位的子元素会跟着这个偏移走，看起来就是向右移了。
2. top/left没生效的原因：你没给top/left设置具体数值，比如只写top:没用，必须给具体值（比如top:0;），浏览器才会按照你指定的位置定位。

解决方法 #

方法1：强制对齐父元素左上角，再调整垂直位置

给所有绝对定位的子元素加上left:0，让它们对齐.info-holder的左侧，再用top控制垂直堆叠的位置：

.perfume-text-holder {
  position: absolute;
  left: 0;
  top: 0; /* 贴住父元素顶部 */
}
.perfume-name-container {
  position: absolute;
  left: 0;
  top: 40px; /* 根据PERFUME文本的高度调整，避免重叠 */
}
.desc-container {
  position: absolute;
  left: 0;
  top: 130px; /* 同理，根据香水名称的高度调整 */
}

方法2：检查并重置父元素的默认间距

如果.info-holder本身有默认的padding或margin，会导致子元素偏移，直接重置：

.info-holder {
  position: relative;
  padding: 0;
  margin: 0;
}

方法3：没必要用绝对定位的情况

如果只是要让三个元素垂直堆叠，其实不需要给所有容器加绝对定位——块级元素默认就会垂直排列，去掉绝对定位后，元素会自动正常堆叠，更简单：

/* 去掉所有position:absolute */
.perfume-text-holder, .perfume-name-container, .desc-container {
  /* 移除position:absolute */
}

内容的提问来源于stack exchange，提问作者sneakyc