绝对定位li文本重叠问题求助：如何让i元素正确置于ul下方

我完全懂你碰到的这个坑——为了做文本动画给<li>加了position: absolute，结果这些列表项直接脱离了文档流，<ul>因为没有正常占据空间的子元素，高度直接塌陷成0，导致后面的<i>元素没法乖乖待在列表下方，非得加padding才能对齐，太麻烦了。下面给你几个实用的解决方案：

方案1：用Flex布局重构容器（推荐） #

把外层的#head改成垂直方向的flex容器，这样我们可以让<ul>占据它应该有的空间，哪怕里面的<li>是absolute定位，后续的<i>也会自动排在下方：

<div id="head">
  <ul>
    <li>Text 1</li>
    <li>Text 2</li>
    <li>Text 3</li>
    <li>...</li>
  </ul>
  <i>需置于ul下方的文本</i>
</div>

#head {
  display: flex;
  flex-direction: column;
  gap: 8px; /* 可以加个间隙让布局更美观 */
}

ul {
  position: relative; /* 给li的absolute定位提供参考坐标系 */
  min-height: 120px; /* 根据你的列表项高度/动画需求设置合适的最小高度 */
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: absolute;
  /* 你的文本动画样式，比如opacity、transform之类的 */
}

方案2：给ul设置固定高度（简单直接） #

如果你的列表项高度是固定的，直接给<ul>设置一个等于列表项最大高度（或者总高度，如果是逐行显示的话）的高度，让<ul>保持占位，<i>自然就会在它下方：

ul {
  position: relative;
  height: 100px; /* 替换成你的列表项实际需要的高度 */
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  position: absolute;
  /* 你的动画样式 */
}

方案3：用伪元素模拟占位空间 #

如果不想固定高度，也可以给<ul>添加一个伪元素，让它占据和列表项相同的高度，既不影响动画效果，又能让<ul>保持正确的占位：

ul {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul::after {
  content: "";
  display: block;
  height: 100px; /* 和你的列表项高度保持一致 */
}

li {
  position: absolute;
  top: 0;
  /* 你的文本动画样式 */
}

这几种方法都能让<i>元素稳定显示在<ul>下方，不用靠额外的padding来硬凑布局啦~

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