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

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;
}