Question

从这个jsfiddle：http://jsfiddle.net/vbaWK/3/，我怎样才能使固定的叠加黑色矩形出现在蓝色矩形上，在滚动身体时它们都重叠。但是有一个额外的规则，无论重叠是什么，都应该覆盖所有内容，包括叠加层。感谢。

HTML：

<div class="black"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="overlay"></div>

的CSS：

.black
{
    background: black;
    width: 100px;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

.blue
{
    background: blue;
    width: 100px;
    height: 2000px;
    z-index: 4;
    position: relative;
}

.green
{
    background: green;
    width:100px;
    height: 2000px;
    z-index: 2;
    position: relative;
}

.overlay
{
    background: white;
    opacity: 0.8;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index:3;
}

感谢您的帮助。

抱歉，我忘了提到当蓝色矩形没有重叠时，它应该在叠加层上方。有冲突。

Answer 1

为黑色矩形指定最高的z-index，如下所示：

.black
{
    background: black;
    width: 100px;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

我有一个z-index问题，我认为可能需要剪辑或其他东西来修复

1 个答案: