Question

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

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

这是一个显示我的问题的小提琴： 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：http://jsfiddle.net/DJA5F/5，也可以在Chrome中使用 - 可能不是最好的解决方法，但由于它是固定的，因此实际上并不重要，因为固定的方向是视口。

具有固定位置的元素上的Z-index

1 个答案: