当使用 position: fixed 时，元素脱离文档流并相对于视口定位，因此 overflow: hidden 在父容器上失效；改用 position: absolute 并配合 position: relative 的父容器，才能让溢出裁剪生效。
当使用 `position: fixed` 时，元素脱离文档流并相对于视口定位，因此 `overflow: hidden` 在父容器上失效；改用 `position: absolute` 并配合 `position: relative` 的父容器，才能让溢出裁剪生效。
在 CSS 布局中，position: fixed 的核心特性是——它始终相对于浏览器视口（viewport）定位，与父级容器的尺寸、位置或 overflow 属性完全无关。这意味着，即使你在 .trees-section 上设置了 overflow: hidden，只要 .trees-image 是 fixed 定位，它就不会被该容器裁剪，而是可能覆盖页面其他区域（如出现在底部、重叠导航栏等），尤其在响应式缩放或滚动时表现明显。
✅ 正确做法：将 position: fixed 替换为 position: absolute，并确保其父容器（即 .trees-section）具有 position: relative（你当前已设置，这是关键前提）：
.trees-section {
position: relative; /* ✅ 必须存在，作为 absolute 子元素的定位上下文 */
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 —— img 元素本身不响应 overflow */
}⚠️ 注意事项：
- <img> 标签是替换元素，自身不支持 overflow 属性，overflow: hidden 应始终作用于其父容器（即 .trees-section）；
- max-height: 80vh 在 absolute 定位下可能失效，建议统一用 height: 100% 配合父容器高度约束；
- 若需实现“视差滚动”效果（常见于 fixed 背景图场景），应改用 background-image + background-attachment: fixed，而非 fixed 定位的 <img>；
- 所有绝对定位元素需显式定义 top/left 等偏移值，否则默认为 0（即贴左上角），确保视觉可控。
总结：fixed ≠ “固定在容器内”，它是全局固定的；要实现“相对于容器固定且可裁剪”，唯一可靠方案是 absolute + relative 父容器组合。这是 CSS 定位模型的基础逻辑，理解这一点能避免大量布局溢出问题。
