通过 position 属性实现轮播图层叠与定位：1. 父容器 relative 配合子项 absolute 实现图片重叠；2. 使用 absolute 与 transform 定位居中底部指示器；3. 左右箭头通过 absolute 固定边缘并垂直居中，hover 时显示，提升交互。
在轮播图组件中，CSS 定位扮演着关键角色，它帮助实现图片的层叠、指示器的精准摆放以及左右箭头的固定布局。通过合理使用 position 属性，可以让轮播图结构更清晰、视觉效果更流畅。
1. 使用 relative 和 absolute 实现内容层叠
轮播图通常由多个图片组成，这些图片需要重叠显示在同一区域。父容器设置 position: relative，子项（即每张轮播图片）使用 position: absolute，使其脱离文档流并堆叠在一起。
示例：- 父容器 .carousel 设置 position: relative，同时定义宽高和溢出隐藏（overflow: hidden）
- 每个图片项 img 或 .slide 设置 position: absolute，top: 0，left: 0，铺满容器
- 这样所有图片都定位在相同位置，通过 z-index 或切换类控制当前显示哪一张
2. 定位轮播指示器（dots）
指示器通常位于轮播图底部居中，使用绝对定位可以轻松将其固定在父容器内部指定位置。
- .dots 容器设置 position: absolute，bottom: 10px，left: 50%
- 配合 transform: translateX(-50%) 实现水平居中
- relative 定位的父级确保 absolute 定位以轮播图为基准
3. 左右切换箭头的固定定位
左右箭头常悬浮在轮播图两侧，可通过绝对定位放置在边缘，并在 hover 时显示。
立即学习“前端免费学习笔记（深入）”；
- .arrow-left 设置 position: absolute，left: 10px，top: 50%，transform: translateY(-50%)
- .arrow-right 同理，right: 10px，垂直居中
- 默认隐藏（opacity: 0），轮播图:hover 时显示，提升交互体验
基本上就这些。利用好 relative 和 absolute 的组合，能高效实现轮播图各元素的精确定位，结构清晰且易于维护。不复杂但容易忽略细节，比如父级必须有定位才能约束子级 absolute 行为。
