本文讲解如何通过绝对定位解决嵌套 div 中子元素无法溢出父容器的问题，从而实现一个带中心可拖拽气泡的窄线型页面分隔滑块。
本文讲解如何通过绝对定位解决嵌套 div 中子元素无法溢出父容器的问题，从而实现一个带中心可拖拽气泡的窄线型页面分隔滑块。
在构建响应式双栏布局时，常需添加一个可交互的分隔滑块（splitter），让用户自由调整左右区域宽度。理想效果是：一条细长的垂直分隔线（如 3px 宽），中间嵌入一个稍宽、圆角、易于点击拖拽的“气泡”（bubble）。但若直接将气泡作为子 div 放入分隔线容器中，由于默认文档流与盒模型限制，气泡会被父容器的 overflow: hidden（或默认行为）裁剪——即使显式设置 overflow: visible，也无法生效，因为 visible 对 flex 容器中的子项溢出控制能力有限。
根本原因在于：overflow 属性仅对具有块级格式化上下文（BFC）且非 flex item 的容器生效；而 #separator 是 flex 容器，其子元素 #separator-bubble 默认为 flex item，受 flex 布局约束，无法自然突破父边界。
✅ 正确解法是脱离文档流——使用 position: absolute：
#separator {
position: relative; /* 关键：为绝对定位子元素提供定位上下文 */
height: 100%;
width: 3px;
background-color: #888;
z-index: 100;
cursor: ew-resize; /* 水平拖拽光标更准确 */
}
#separator #separator-bubble {
position: absolute; /* ✅ 脱离 flex 布局，不再受父 flex 约束 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中对齐（推荐） */
width: 40px;
height: 10px;
border-radius: 5px;
background-color: #555;
z-index: 1000;
}
同时，务必为父容器 #separator 添加 position: relative，否则 absolute 子元素将相对于最近的已定位祖先（如 ）定位，导致位置失控。
? 补充建议：
- 使用
cursor: ew-resize替代e-resize，更符合水平拖拽语义； - 若需支持拖拽逻辑，请配合 JavaScript 监听
mousedown/mousemove事件，动态调整左右区域宽度（例如修改flex-basis或width）； - 为提升可访问性，可添加
tabindex="0"和键盘事件支持； - 在移动端需额外处理
touchstart/touchmove事件。
总结：当需要子元素视觉上“突破”父容器边界时，优先考虑 position: absolute + position: relative 组合，而非依赖 overflow: visible——后者在 flex 或 grid 容器中往往无效。这一模式广泛适用于滑块手柄、tooltip 箭头、下拉菜单三角等 UI 场景。
