如何在堆叠式CSS Flexbox中正确定位动画数字？

你的问题核心是绝对定位破坏了Flex布局的文档流，加上Flex容器属性冲突，导致缩放时位置失控和适配异常。下面是修复后的完整代码，附带关键修改说明：

修改后的HTML #

<div class="legg-section">
  <h1 class="legg">
    <ul>
      <li>3</li>
      <li>0</li>
      <li>,</li>
      <li>5</li>
      <li>3</li>
      <li>8</li>
      <li>+</li>
    </ul>
  </h1>
  <h2 class="legg-desc">Leggs Broken</h2>
</div>

• 移除了无用的<div style="clear: both"></div>，改用Flex布局后无需清除浮动

修改后的CSS #

/* 主容器：用Flex实现垂直居中，修正属性冲突 */
.legg-section {
  display: flex;
  flex-direction: column; /* 移除重复的row-reverse，保持垂直排列逻辑 */
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  background-color: #ffffff;
  min-height: 200px; /* 可选：避免内容过短时容器塌陷 */
  padding: 2rem 0; /* 上下内边距，和页面其他模块保持间距 */
}

.legg-desc {
  color: #ae95da;
  margin-top: 1.5rem; /* 用margin替代padding-top，更符合Flex布局的间距控制 */
  font-size: 1.2rem;
}

/* 数字动画部分：移除绝对定位，依托Flex布局居中 */
.legg ul {
  padding: 0;
  margin: 0;
  display: flex; /* 用Flex排列数字，替代float实现更稳定的横向布局 */
  gap: 0.2rem; /* 控制数字间的间距，比margin更灵活且适配性更好 */
}

.legg ul li {
  list-style: none;
  color: #ae95da;
  font-size: clamp(2rem, 5vw, 4rem); /* 响应式字体大小，适配不同屏幕尺寸 */
  font-family: 'Poppins', sans-serif;
  transition: transform 0.9s ease; /* 明确过渡属性，减少不必要的性能消耗 */
  font-weight: 400;
  transform-style: preserve-3d; /* 开启3D空间，让旋转动画更自然 */
}

.legg ul:hover li {
  transform: rotateY(360deg);
}

/* 给每个数字添加递增延迟，形成连贯的动画序列 */
.legg ul:hover li:nth-child(1) { transition-delay: 0.1s; }
.legg ul:hover li:nth-child(2) { transition-delay: 0.2s; }
.legg ul:hover li:nth-child(3) { transition-delay: 0.3s; }
.legg ul:hover li:nth-child(4) { transition-delay: 0.4s; }
.legg ul:hover li:nth-child(5) { transition-delay: 0.5s; }
.legg ul:hover li:nth-child(6) { transition-delay: 0.6s; }
.legg ul:hover li:nth-child(7) { transition-delay: 0.7s; }

关键修改说明 #

1. 移除绝对定位：原代码中position: absolute让数字列表脱离了Flex容器的控制，top:30%和margin-top:225px的组合在屏幕缩放时会因为百分比与固定值的冲突导致跳动，现在完全依赖Flex布局实现居中，与容器内其他元素保持位置关联。
2. 修正Flex容器属性：原代码重复设置flex-direction（先column再row-reverse）导致布局逻辑混乱，现在统一为column，保证数字与描述的垂直排列关系。
3. 响应式适配优化：用clamp()设置字体大小，确保小屏幕不溢出、大屏幕足够醒目；用gap控制数字间距，替代float和margin，适配稳定性大幅提升。
4. 动画体验优化：添加transform-style: preserve-3d让3D旋转效果更自然，给每个数字设置递增的过渡延迟，动画序列更流畅。

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