如何避免绝对定位元素重叠，无需额外容器实现下拉菜单式悬浮效果

可以实现，无需额外嵌套容器，仅需调整CSS样式即可，方案如下：

实现思路 #

• 给父容器添加position: relative，让绝对定位的子元素基于父容器坐标偏移
• 统一设置span的行高，确保纵向偏移值可计算
• 通过:nth-of-type选择器为不同的.sub元素设置差异化top值，实现纵向错开排布
• 绝对定位的元素默认脱离文档流，自然会悬浮覆盖在父容器下方的其他元素之上，不会占用正常文档流位置

完整可运行代码 #

CSS部分 #

div {
  position: relative;
}
span {
  display: block;
  line-height: 1.5em; /* 统一行高，偏移量可根据实际需求调整 */
}
span.sub {
  color: blue;
  position: absolute;
  left: 0; /* 对齐父容器左侧，可根据需求调整横向位置 */
}
/* 第一个.sub元素（Tea），刚好在父容器底部下方 */
span:nth-of-type(2).sub {
  top: 100%;
}
/* 第二个.sub元素（Milk），向下偏移1行 */
span:nth-of-type(3).sub {
  top: calc(100% + 1.5em);
}
/* 第三个.sub元素（Water），向下偏移2行 */
span:nth-of-type(4).sub {
  top: calc(100% + 3em);
}

HTML部分（无修改，无需新增容器） #

<div>
  <span>Coffee</span>
  <span class="sub">Tea</span>
  <span class="sub">Milk</span>
  <span class="sub">Water</span>
</div>

补充说明 #

如果.sub元素的数量是动态变化的，可以搭配少量JS遍历.sub元素，依次计算并设置每个元素的top值，同样不需要额外嵌套容器。

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