如何让固定定位的图片被严格限制在父容器内不溢出

当对图片使用 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 严格裁剪，需满足两个前提：

1. 父容器必须建立定位上下文：即 .trees-section 需设置 position: relative（你已正确写出）；
2. 子元素改用 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 父级。理解这一根本区别，是解决溢出问题的关键。