本文讲解如何通过绝对定位解决嵌套 div 中子元素无法溢出父容器的问题，从而实现一个带中心可拖拽气泡的垂直分隔线滑块，适用于双面板尺寸调节场景。
本文讲解如何通过绝对定位解决嵌套 div 中子元素无法溢出父容器的问题，从而实现一个带中心可拖拽气泡的垂直分隔线滑块，适用于双面板尺寸调节场景。
在构建响应式双栏布局（如代码编辑器 + 预览区、左导航 + 主内容）时，常需添加一条可拖拽的垂直分隔线，并在其上居中显示一个稍宽的圆形/矩形“拖拽气泡”，以提升交互友好性。但若直接将气泡（#separator-bubble）作为子元素置于窄分隔线（#separator）内，即使设置 overflow: visible，气泡仍会被裁剪——这是因为 overflow 属性仅对具有块级格式化上下文（BFC）且非定位的容器生效；而默认的 flex 容器中，子元素的 position: static 无法突破父级边界。
正确解法是：将气泡设为绝对定位，并依托已设 position: relative 的父容器进行精确定位。由于原 #separator 未显式声明定位上下文，需先补充 position: relative，再对气泡应用 position: absolute 并居中：
main {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
main #separator {
height: 100%;
width: 3px;
background-color: #888;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
cursor: ew-resize; /* 更准确的水平拖拽光标 */
position: relative; /* 关键：创建定位上下文 */
overflow: visible; /* 此处已非必需，但保留无害 */
}
#separator #separator-bubble {
position: absolute; /* 关键：脱离文档流，突破父级限制 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 真正居中（推荐优于 margin） */
width: 40px;
height: 10px;
border-radius: 5px;
background-color: #555;
z-index: 1000;
box-shadow: 0 2px 6px rgba(0,0,0,0.2); /* 可选：增强视觉层次 */
}✅ 关键要点总结：
position: relative必须加在父容器（#separator）上，否则absolute子元素会相对于最近的定位祖先或定位；- 使用
top: 50%; left: 50%; transform: translate(-50%, -50%)实现精准居中，兼容任意宽高；cursor: ew-resize比e-resize更符合左右拖拽语义；z-index需确保气泡层高于分隔线及两侧内容，避免被遮挡。
完成上述样式后，气泡将完整显示在细线中央，且支持无障碍拖拽（后续可结合 mousedown/mousemove 实现逻辑）。此方案轻量、语义清晰，是 CSS 布局中处理“视觉溢出”需求的经典实践。
