本文详解如何解决绝对定位子元素（如 `.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 的参照机制，是精准控制元素布局的基础能力。
