当对图片使用 position: fixed 时，它会脱离文档流并相对于视口定位，因此无法被父元素的 overflow: hidden 约束；改用 position: absolute 并配合正确的父级定位，才能实现视觉上“固定效果”且受容器裁剪。
当对图片使用 `position: fixed` 时，它会脱离文档流并相对于视口定位，因此无法被父元素的 `overflow: hidden` 约束；改用 `position: absolute` 并配合正确的父级定位，才能实现视觉上“固定效果”且受容器裁剪。
在 CSS 中，position: fixed 的核心特性是始终相对于浏览器视口（viewport）定位，与父元素无关。这意味着无论 .trees-section 是否设置了 overflow: hidden、height 或 position: relative，.trees-image 都会无视这些约束，直接依据视口坐标渲染——导致图片“穿透”容器、在滚动时重复出现、或在窄屏下错位重叠。
✅ 正确解法：使用 position: absolute + 定位上下文
要让图片既保持“背景式覆盖”效果，又能被 .trees-section 严格裁剪，需满足两个前提：
- 父容器必须建立定位上下文：即 .trees-section 需设置 position: relative（你已正确写出）；
- 子元素改用 position: absolute，并通过 top/left/right/bottom 和 width/height 精确控制其在父容器内的占位。
以下是优化后的关键 CSS：
.trees-section {
position: relative; /* ✅ 创建定位上下文 */
height: 80vh;
width: 100%;
overflow: hidden; /* ✅ 裁剪超出部分 */
}
.trees-image {
position: absolute; /* ❌ 替换 fixed → absolute */
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* ✅ 保持宽高比并填满 */
/* 移除 overflow: hidden（absolute 元素不响应父级 overflow，但父级 overflow 仍生效） */
}
? 补充技巧：如需实现「视差滚动」或「视觉固定」效果（即滚动时图片相对静止），可结合 background-attachment: fixed（仅适用于背景图）或 JavaScript 控制 transform: translateY()，但切勿滥用 fixed 于非全屏场景。
⚠️ 注意事项：
- overflow: hidden 对 fixed 元素完全无效，这是 CSS 规范行为，非 Bug；
- 若必须保留 fixed（例如全局悬浮按钮），则需通过 JS 动态计算视口位置并监听 scroll 事件，但本例中无此必要；
- 所有 absolute 元素需显式定义至少两个偏移属性（如 top + left），否则可能意外塌陷。
总结：定位方式的选择取决于目标参照系——需要锚定视口？用 fixed；需要锚定父容器？用 absolute + relative 父级。理解这一根本区别，是解决溢出问题的关键。
