css - コンテナが相対的に配置され、オーバーフローが非表示になっている場合、ネストされたdivをブリードすることはできませんか？

Question

コンテナが相対的に配置され、オーバーフローが非表示に設定されている場合、ネストされたdivをブリードすることは完全に不可能かどうか疑問に思います。

この場合、ネストされたdivに固定位置を指定することはできません。

この例を見てください：http：//jsfiddle.net/s7nhw/11/。

これを行う方法を知っている人はいますか？

フィードバックをいただければ幸いです。

<div class="container">
    <div class="nested-div"></div>
</div>

<style>
.container {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background: green;

    overflow: hidden;
    position: relative;
}
.nested-div {
    width: 200px;
    height: 100px;
    background: red;
    z-index: -1;

    position: absolute;
}
</style>

Answer 1

{オーバーフロー：非表示}をオーバーライドできる状況に遭遇したことはありません。ネストされたdivをコード内の親の外側に配置するようにHTMLを再構築してから、絶対配置とz-indexを使用して現在のラッパーの後ろに配置する必要があります。

http://jsfiddle.net/s7nhw/13

.container {
    width: 100px;
    height: 100px;
    background: green;
    overflow: hidden;
    position:absolute;
    left: 50%;
    margin-left: -50px;
}
.nested-div {
    width: 200px;
    height: 100px;
    background: red;
    z-index: -1;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

<div class="nested-div"></div>
<div class="container"></div>

ここにいくつかのさらなる議論があります： overflow：hiddenwithz-indexをオーバーライドします

Answer 2

絶対位置の子要素は常に相対位置の親要素の下に残ります