z-index堆栈上下文 - 孩子重叠父母瓦特/溢出：隐藏？

Question

什么是最好的方式来达到这个目的：

我有两个元素，都绝对定位，我希望孩子水平重叠，即使其父母有溢出x：隐藏。

FIDDLE

.parent { 
    position: absolute; 
    z-index:1; 
    height: 100%; 
    min-height: 300px; 
    overflow-y:auto; 
    overflow-x:hidden; 
    width: 200px; 
    background: #ccc; 
} 
.child { 
    position:absolute; 
    z-index:2; 
    width: 300px; 
    height: 100px; 
    top: 30px; 
    left: 10px; 
    padding: 10px; 
    background: #555; 
    color: white 
} 

Answer 1

添加第三个DIV是两者的母公司。将两个项目都绝对放在外部父项中。

<div class="outer-parent"> 
    <div class="parent"> 
    </div> 
    <div class="child"> 
    </div> 
</div>