Question

这可能是一个非常简单的问题。或者一个众所周知的限制。

我有两个div。我希望第一个div 前面与第二个div 重叠重叠。我能够做到这一点。

我的问题是第一个div是透明的。我无法让它完全隐藏它重叠的第二个div的部分。

以下是HTML。

    <div class="front">
        <div>My first div</div>
        <div>My first div</div>
        <div>My first div</div>
    </div>

    <div class="back">
        <div>My second div</div>
        <div>My second div</div>
        <div>My second div</div>
        <div>My second div</div>
        <div>My second div</div>
        <div>My second div</div>
    </div>

以下是css。

    div.front {
        height:60px;
        width:100px;
        border:3px solid blue;
        position:absolute;
        z-index:1;
    }
    div.back {
        background-color:#e0e0e0; 
        border:1px solid red;
        position:absolute;
        z-index:-1;
    }

你可以在这里找到JSFiddle http://jsfiddle.net/tomilay/p372u894/3/

提前致谢。

Answer 1

你需要给最前面的div一个背景颜色。

    div.front {
        height:60px;
        width:100px;
        border:3px solid blue;
        position:absolute;
        z-index:1;
        background-color: white;
    }
    div.back {
        background-color:#e0e0e0; 
        border:1px solid red;
        position:absolute;
        z-index:-1;
    }

Answer 2

正如您刚才所说，background-color的{{1}}是透明的，因此您将了解其背后的内容。尝试设置一个不同于透明的front，以便按照您的需要工作：

JSFiddle示例：http://jsfiddle.net/p372u894/7/

CSS更新：

background-color

Answer 3

只需使用<div>类为front添加灰色背景色。

div.front {
    height:60px;
    width:100px;
    border:3px solid blue;
    position:absolute;
    z-index:1;
    background-color:#e0e0e0; 
}

请检查：jsFiddle。

DIV重叠但不隐藏重叠的DIV部分

3 个答案: