CSS固定定位图片如何限制在父容器内不溢出

核心结论：`position: fixed` 默认以浏览器视口为参照系，完全脱离文档流，因此父容器的 `overflow: hidden` 无法限制它。若想让图片看似固定但又被父容器严格裁剪，应改用 `position: absolute`，并配合正确的父级定位上下文。

在实际开发中，很多开发者会遇到图片使用 `position: fixed` 后溢出父容器的问题。`position: fixed` 的核心特性是始终以浏览器视口（viewport）为锚点，与父元素的定位方式、宽高限制完全无关。即使 `.trees-section` 设置了 `overflow: hidden`、`height` 和 `position: relative`，`.trees-image` 也会忽略这些约束，直接按视口坐标渲染——导致图片“穿透”容器，滚动时反复出现，或在窄屏上错位堆叠。

正确的解决方案其实很简单：使用 `position: absolute` 并建立正确的定位上下文。

要实现图片背景式覆盖效果，同时受到 `.trees-section` 的严格裁剪，需要满足两个条件：

1. 父容器必须创建定位上下文：`.trees-section` 需要设置为 `position: relative`（你这里已经正确设置）；
2. 子元素改用 `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` 父级。理解这个根本区别，溢出问题就迎刃而解了。