Html 如何在溢出：隐藏且位置：相对的元素中使元素可见/溢出

给定具有overflow:hidden的容器元素，使子元素position:absolute通常会使子元素弹出，以便在其容器外部可见

但是，如果容器具有position:relative，则这似乎不起作用

当滚动页面时，如何使子元素弹出到外部，并且仍然保持其父元素的位置？

CSS

HTML:

这一问题以前已经问过很多次了。您可以选择将“黄色方框”移出其容器，如果您想“完全显示”，则可以绝对定位它。（正如你在问题中所说）

位置：固定：p请告诉我，线索是盒子1有相对位置，这不起作用。（见小提琴）。如果我误解了，请给我链接一个答案或修复小提琴，让我知道你的意思。位置：修复使其弹出，但滚动页面使其位置不随页面滚动：/
/* Positioning */
#box1 { overflow: hidden ;position:relative}/*don't touch*/
#box2 { position: static ;}
#box3 { position: relative;}
#box4 { position: absolute;}/*make this show on top of everything*/
/* Styling */
#box1 { background: red; padding: 5px; width: 125px;height:30px }/*don't touch*/
#box2 { background: green; padding: 5px; width: 115px }
#box3 { background: blue; padding: 5px; width: 105px; height: 100px }
#box4 { background: yellow; padding: 5px; width: 95px; height: 150px }

<div id="box1">
    <div id="box2">
            <div id="box3">
                <div id="box4"/>
            </div>
    </div>
</div>