Section标签内换行无效，无法将弹跳箭头定位至section底部居中求助

核心问题：定位依赖父元素的上下文，且默认动画只执行一次 #

解决步骤：

1. 给section设置相对定位，作为箭头绝对定位的参考容器
2. 用绝对定位+transform实现箭头的底部居中
3. 添加animate__infinite类让弹跳动画持续执行

示例代码：

HTML：

<section class="scroll-section">
  <h1>项目标题</h1>
  <!-- 新增animate__infinite类实现持续弹跳 -->
  <img src="your-arrow-path.png" class="animate__animated animate__bounce animate__infinite section-arrow" alt="向下滚动箭头">
</section>

CSS：

.scroll-section {
  position: relative; /* 必须设置，让箭头的absolute相对于section定位 */
  height: 100vh; /* 假设section占满视口高度，根据你的需求调整 */
  scroll-snap-align: start; /* 配合scroll snapping的属性 */
}

.section-arrow {
  position: absolute;
  bottom: 2rem; /* 距离section底部的距离，可自定义 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中，抵消left:50%的偏移 */
  display: block; /* 确保图片是块级元素，避免inline带来的定位问题 */
  width: 3rem; /* 调整箭头大小 */
}

排查点： #

• 检查是否有其他CSS规则覆盖了箭头的position/transform属性
• 确保animate.css的样式文件已经正确引入（如果用的是官方库）
• 如果section没有设置固定高度，bottom:2rem可能不会显示在视觉底部，需要给section设置合适的高度（比如height:100vh或具体数值）

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