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

我从未遇到过可以覆盖 {overflow: hidden} 的情况。您可能需要重构 HTML 以在代码中将嵌套的 div 放置在其父级之外，然后使用绝对定位和 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>

这里有一些进一步的讨论:override overflow:hidden with z-index