本文详解如何解决子 `div`（如 `.box`）因 `position: absolute` 导致超出父容器（如 `.viewblocks`）边界的问题，核心在于为父容器设置 `position: relative` 并合理定义子元素的 `top`/`right`/`left`/`bottom` 偏移值，同时调整尺寸适配。
在 CSS 布局中，当子元素使用 position: absolute 时，它将脱离文档流，并相对于最近的已定位祖先元素（即 position 值为 relative、absolute、fixed 或 sticky 的祖先）进行定位。若父容器（如 .viewBlocks）未显式设置定位上下文，则绝对定位的子元素会回溯至
或初始包含块，从而完全脱离父容器约束——这正是 .box（宽 250px）溢出仅 190px 宽的 .viewBlocks 的根本原因。要使 .box 真正“受限于” .viewBlocks，需两步协同：
- 为父容器启用定位上下文：在 .viewBlocks 上添加 position: relative（不改变其正常流位置，但创建新的定位参考系）；
- 显式控制子元素偏移与尺寸：在 .box 上设定 top、right 等偏移量，并将 width 改为 100%（或具体适配值），避免硬编码宽度导致溢出。
以下是修正后的关键 CSS 代码：
.viewBlocks {
text-align: center;
float: right;
height: 700px;
width: 190px;
border: 1px solid black;
background-color: darkgray;
position: relative; /* ✅ 创建定位上下文 */
}
.box {
position: absolute; /* ✅ 相对于 .viewBlocks 定位 */
top: 0; /* ✅ 指定上边缘偏移 */
right: 0; /* ✅ 向右对齐（也可用 left: 0 实现左对齐） */
width: 100%; /* ✅ 自适应父容器宽度，避免 250px 溢出 */
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;
}⚠️ 注意事项：仅添加 position: relative 到父容器并不足够——必须配合子元素的 top/left/right/bottom 显式声明，否则 absolute 子元素默认以 top: 0; left: 0 定位，仍可能因尺寸过大而溢出；若需子元素居中，可改用 left: 50%; top: 50%; transform: translate(-50%, -50%);，但需注意此时 width: 100% 将基于父容器计算，仍需确保内容可滚动或换行；避免在 .viewBlocks 上同时使用 float 和 position: relative 造成布局干扰（本例中 float: right 可保留，但建议在现代布局中优先考虑 Flexbox 或 Grid）；如需响应式支持，可将 width: 100% 替换为 max-width: 100%，并配合 box-sizing: border-box 确保内边距与边框不增加总宽度。
通过以上调整，.box 将严格约束在 .viewBlocks 的可视区域内，既保持绝对定位的灵活性，又实现精准的尺寸与位置控制。这是 CSS 定位体系中“父设相对、子设绝对”的经典实践模式，适用于弹窗、工具栏、悬浮操作面板等场景。
立即学习“前端免费学习笔记（深入）”；
