css - 具有固定位置的元素上的 Z 索引

Question

我有一个固定位置的左面板(它总是在左侧，无论您滚动多少)，并且该左面板中的元素也很少。在某个事件中会出现一个掩码(它会覆盖所有内容，因为 position:fixed; z-index: 102)。

我的目标是当 X 事件触发并且掩码出现时，在掩码上显示 holder 元素。

这是一个显示我的问题的 fiddle : JSFIDDLE

这是我的 HTML:

<div class="leftpanel">
    <div class="just-random-elem" style="height: 30px;">just an element to move the holder abit down</div>
    <div class="holder">asdasdas</div>
</div>
<div class="mask"></div>

<div style="height: 9999px;">Just to make sure both mask and leftpanel are with fixed positions.</div>

这是 CSS:

.mask {
    opacity: 0.85;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 101;
    background-color: #000;
}
.leftpanel {
    width: 250px;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: red;
    padding: 15px;
}
.holder {
    width: 230px;
    height: 90px;
    background-color: #fff;
    z-index: 99999;  <<<<<<<<<< This is NOT working!
}

Answer 1

你的 .holder 元素没有定位，所以 z-index 对它没有任何影响。您需要添加一个不同于默认 static 的位置值 – relative 即可。

http://jsfiddle.net/DJA5F/4在我测试过的每个浏览器中都是这样工作的——除了 Chrome。不能自发地说 Chrome 在这里处理的堆栈上下文是否正确而其他的则不是——或者是否相反。
如果将 #mask 放入 .leftpanel 中，也可以在 Chrome 中使用:http://jsfiddle.net/DJA5F/5 – 可能不是最好的解决方法，但由于它是固定的，所以实际上并不重要，因为固定的方向是视口(viewport)。