Question

我有一个包含内容的div和一个只是一个包装器的outter div。我正在尝试将来自exter div的css与内部div组合，这样我就可以删除outter div。当我这样做时，div不再可见（假设因为零高度）。我想也许这是订单，所以我尝试重新安排css但仍然没有运气。

#div1 {
    min-height: 200px;
    width: 100vw;
}

#div2 {
    /* min-height: 200px;
    width: 100vw; */
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #74CFAE;
    font-size: 25px;
    line-height: 40px;
    z-index: -1;
}

#div3 {
    position: relative;
    height: 600px;
    width: 100vw;
    background-color: #333;
}

<div id="div1">
    <div id="div2">
        <p> I want the following div to scroll over this content.</p>
    </div>
</div>

<div id="div3"></div>

如果你注释掉'div1'的css并将它与'div2'结合起来，你会看到我在说什么。

这是一个需要包装器的情况吗？或者我的CSS有什么固有的错误吗？

Answer 1

我对它的看法：如果你知道div2的高度，你可以放弃div1，但是你必须将div3放在一个明确的顶部。如果您不知道div1 / 2的高度并且不想动态重新定位div3，那么div1似乎是一个很好的解决方案。已知div2高度的建议：

#div2 {
    height: 100px
    width: 100vw;
    position: fixed;

    background-color: #74CFAE;
    font-size: 25px;
    line-height: 40px;
    z-index: -1;
}

#div3 {
    position: relative;
    height: 600px;
    width: 100vw;
    background-color: #333;
    top: 100px;
}

https://jsfiddle.net/oahurc53/1/

Answer 2

它的隐藏是因为当你向前推进z-index -1时，你会看到div。

CSS位置固定维持高度

2 个答案: