Question

我想知道当容器相对放置并且溢出设置为隐藏时，是否完全不可能出现嵌套div？

在这种情况下，给嵌套的div一个固定的位置不是另一种选择。

任何知道怎么做的人？

我会感激任何反馈！

<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

Answer 2

绝对位置子元素始终保持在相对位置父元素

之下

当容器相对放置并隐藏溢出时，不可能出血嵌套div？

2 个答案: