如何使元素在overflow：hidden和position：relative中的元素内可见/溢出

Question

给定一个带有overflow：hidden的容器元素，使子元素位置：absolute通常会使子弹出，这样它就可以在容器外看到。

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

我们如何让子元素在外面弹出，并且在滚动页面时仍然有位置粘在其父元素上？ See fiddle

CSS

/* 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 }

HTML：

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