核心结论：`position: fixed` 默认以浏览器视口为参照系，完全脱离文档流，因此父容器的 `overflow: hidden` 无法限制它。若想让图片看似固定但又被父容器严格裁剪，应改用 `position: absolute`，并配合正确的父级定位上下文。
在实际开发中，很多开发者会遇到图片使用 `position: fixed` 后溢出父容器的问题。`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` 以及宽高属性精确控制其在父容器内的位置。
接下来是优化后的关键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`（例如全局悬浮的返回顶部按钮），则需要JavaScript动态计算视口位置并监听滚动事件。但在本例中完全不需要；
- 所有 `absolute` 定位元素必须显式指定至少两个偏移属性（如 `top` 和 `left`），否则可能出现位置塌陷，导致意外效果。
一句话总结：定位方式的选择，说白了就是看目标参照系是谁。需要锚定视口？用 `fixed`。需要锚定父容器？用 `absolute` 加上 `relative` 父级。理解这个根本区别，溢出问题就迎刃而解了。
