z-indexスタッキングコンテキスト - 子オーバーラップ親w /オーバーフロー：非表示？これを達成するための最良の方法は何

Question

：

私は2つの要素を持って、両方の絶対位置と、私は親が持っているにもかかわらず、子供が水平方向にオーバーラップしたいオーバーフローを-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>