本文讲解如何通过绝对定位解决子元素（拖拽气泡）在父容器（分隔线）内无法溢出显示的问题，从而构建一个视觉清晰、交互友好的双向页面尺寸调节滑块。
本文讲解如何通过绝对定位解决子元素（拖拽气泡）在父容器（分隔线）内无法溢出显示的问题，从而构建一个视觉清晰、交互友好的双向页面尺寸调节滑块。
在构建响应式双栏布局调节器（如代码编辑器/预览区分离界面）时，常需一个细长的垂直分隔线（#separator），并在其中心嵌入一个稍宽的圆形/矩形“拖拽气泡”（#separator-bubble），便于用户精准抓取。但默认情况下，<div> 是普通流内元素，即使为父容器设置了 <code>overflow: visible，其子元素仍受 包含块（containing block） 的限制——尤其当父元素使用 flex 布局时，align-items: center 和 justify-content: center 会将子元素严格约束在主轴与交叉轴范围内，导致 #separator-bubble 无法横向突破 3px 宽的父容器边界。
根本解法是脱离文档流：将气泡设为 position: absolute，使其脱离 flex 布局的约束，转而相对于最近的定位上下文（positioned ancestor） 进行定位。由于 #separator 默认是 static（非定位元素），需为其显式添加 position: relative，以创建新的定位上下文：
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; /* 关键：创建定位上下文 */
}
#separator #separator-bubble {
position: absolute; /* 关键：脱离 flex 布局限制 */
width: 40px;
height: 10px;
border-radius: 5px;
background-color: #555;
z-index: 1000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 精确居中，兼容任意尺寸 */
}
✅ 注意事项：
transform: translate(-50%, -50%)比单纯用left: -17px（即(40-3)/2）更健壮，避免硬编码偏移值；- 将
cursor改为ew-resize（左右双向箭头）更符合水平拖拽语义；- 若后续需添加拖拽逻辑（如
mousedown+mousemove），气泡的z-index: 1000可确保其始终位于分隔线上层，不被遮挡；- 避免对
#separator设置overflow: hidden（即使未显式声明，flex 容器默认也不会裁剪绝对定位子元素，但显式声明visible无实际作用，可省略）。
最终，气泡将完美横跨分隔线两侧，形成直观的拖拽锚点，同时保持整体布局简洁可控。此方案轻量、兼容性好（支持所有现代浏览器及 IE11+），是 UI 分隔控件的标准实践之一。
