当子元素使用 `position: absolute` 时，若父容器未设置 `position: relative` 或未明确指定子元素的定位偏移（如 `left`/`right`/`top`/`bottom`），子元素将脱离文档流并可能超出父容器边界；本文提供完整修复方案与最佳实践。
在 CSS 布局中，position: absolute 的元素会相对于最近的已定位祖先元素（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）进行定位。若不存在这样的祖先，则回退到初始包含块（通常是视口），从而导致子元素完全脱离父容器约束——这正是 .box（宽 250px）溢出 .viewBlocks（宽仅 190px）的根本原因。
✅ 正确做法：双管齐下
为父容器显式声明定位上下文
在 .viewBlocks 上添加 position: relative —— 这并非“可有可无”的装饰，而是为绝对定位子元素建立参考坐标系的必要前提。为子元素明确定位偏移与尺寸逻辑
仅设 position: absolute 不够，还需通过 top/right/bottom/left 指定其在父容器内的落点，并合理控制尺寸（如用 width: 100% 替代固定像素值，确保自适应）。
以下是修正后的完整代码示例：
.viewBlocks {
text-align: center;
float: right;
height: 700px;
width: 190px;
border: 1px solid black;
background-color: darkgray;
position: relative; /* ✅ 关键：创建定位上下文 */
}
.box {
position: absolute;
top: 0; /* ✅ 相对于 .viewBlocks 顶部对齐 */
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;
}⚠️ 注意事项与进阶建议
- 避免固定宽高硬编码冲突：.box 原 width: 250px 明显大于父容器 190px，是溢出的直接诱因。优先使用百分比、max-width 或 fit-content 等响应式单位。
- 慎用 float 与 absolute 混合布局：.viewBlocks 使用 float: right 可能引发清除浮动问题。若无需兼容旧浏览器，推荐改用 Flexbox 或 Grid 重构整体布局，提升可维护性。
- 调试技巧：在浏览器开发者工具中检查 .viewBlocks 的 computed position 是否为 relative，并确认 .box 的 offsetParent 是否指向 .viewBlocks —— 这是验证定位关系是否生效的最直接方式。
- 无障碍与语义补充：绝对定位可能影响阅读顺序和焦点管理，对含表单控件（如 <input> 和 <button>）的 .box，建议添加 aria-label 或逻辑分组（<fieldset>）以保障可访问性。
通过以上调整，.box 将严格约束在 .viewBlocks 内部，同时保持灵活的定位控制能力。记住：绝对定位 ≠ 脱离布局责任，而是将布局责任从文档流移交至显式定义的定位上下文。
