嵌套Div溢出问题：滑块拖拽气泡无法超出分隔线

问题出在父元素#separator使用flex布局居中子元素，同时父元素宽度仅3px，即便设置overflow: visible，子元素的布局范围仍被父元素尺寸限制。改用绝对定位可让气泡脱离父元素布局流，实现超出显示效果。

修改后的代码如下：

CSS #

main {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

main #separator {
    height: 100%;
    width: 3px;
    background-color: grey;
    z-index: 100;
    cursor: e-resize;
    overflow: visible;
    position: relative; /* 添加相对定位，作为绝对定位的参考容器 */
}

#separator #separator-bubble {
    width: 40px;
    height: 10px;
    border-radius: 5px;
    background-color: grey;
    z-index: 1000;
    position: absolute; /* 改为绝对定位，脱离父元素flex布局限制 */
    left: 50%; /* 水平方向相对父元素居中 */
    top: 50%; /* 垂直方向相对父元素居中 */
    transform: translate(-50%, -50%); /* 偏移自身一半尺寸，实现精准居中 */
}

HTML #

<main>
    <div id="separator"><div id="separator-bubble"></div></div>
</main>

关键修改说明 #

• 给#separator添加position: relative，让子元素的绝对定位以它为参照基准
• 将#separator-bubble设为position: absolute，脱离父元素的flex布局约束，不再受父元素3px宽度限制
• 通过left:50%配合transform:translate(-50%,-50%)，确保气泡始终处于分隔线的中心位置，同时自然向左右两侧超出父元素范围

内容的提问来源于stack exchange，提问作者Jan Matějíček