本文详解如何解决绝对定位子元素（如 `.box`）因尺寸超出父容器（如 `.viewblocks`）而发生视觉溢出的问题，核心在于正确设置父容器的 `position: relative` 并合理约束子元素的定位偏移与宽高。
当使用 position: absolute 定位子元素时，它会脱离文档流，并相对于最近的已定位祖先元素（即 position 值为 relative、absolute、fixed 或 sticky 的父级）进行定位。若父容器 .viewBlocks 未显式声明 position: relative，浏览器将向上回溯至
或 进行定位，导致子元素完全脱离父容器边界控制——这正是 .box（宽 250px）在仅 190px 宽的 .viewBlocks 中“溢出”的根本原因。
仅添加 position: relative 到 .viewBlocks 是必要但不充分的步骤；还需主动定义 .box 的定位基准（如 top/right/bottom/left）并适配尺寸，否则其默认 top: 0; left: 0 仍会从父容器左上角开始绘制，超出右边界。
✅ 正确做法如下：
-
为父容器启用定位上下文：
在 .viewBlocks 中添加 position: relative，使其成为绝对定位子元素的参考容器。 -
约束子元素位置与尺寸：
立即学习“前端免费学习笔记（深入）”；
- 使用 right: 0（或 left: 0）明确水平起始边；
- 将 width 改为 100%（而非固定 250px），确保宽度严格继承父容器（190px）；
- 保留 top: 0 以对齐顶部，避免意外偏移。
以下是修正后的完整 css 示例：
.viewBlocks { text-align: center; Float: right; height: 700px; width: 190px; border: 1px solid black; background-color: darkgray; position: relative; /* ✅ 启用定位上下文 */ } .box { position: absolute; top: 0; /* ✅ 显式定义垂直起点 */ right: 0; /* ✅ 水平靠右对齐（也可用 left: 0） */ width: 100%; /* ✅ 自适应父宽，避免溢出 */ height: 250px; background-color: #f1f1f1; border: 1px solid #d3d3d3; border-radius: 5px; resize: both; overflow: auto; z-index: 1; text-align: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .box h2 { margin: 0; padding: 10px; }⚠️ 注意事项：
- 若需多子元素并排或堆叠，应统一规划 top/left/right/bottom 值，避免重叠；
- width: 100% 仅作用于内容区，若 .box 含 padding 或 border，建议配合 box-sizing: border-box 确保尺寸精确；
- 避免在 .viewBlocks 上同时使用 float 和 position: relative 引发布局干扰（本例中 float: right 属于全局布局需求，不影响内部定位逻辑，但更现代方案推荐改用 Flexbox 或 Grid）；
- 如需响应式支持，可将固定宽高替换为 max-width 或 clamp() 函数，增强兼容性。
总结：修复溢出的关键不在“隐藏”（如 overflow: hidden），而在于建立正确的定位关系 + 主动尺寸约束。理解 position: absolute 的参照机制，是精准控制元素布局的基础能力。