Question

我有一个侧边栏，位置：固定;在我的模板的右侧。我还有整个页面的叠加层。我希望侧边栏中的一个元素（列表元素）被标记为活动并位于叠加层的前面。我有一个关于js小提琴的例子： http://jsfiddle.net/t93ew/

HTML：

<body>

<div id="fixed">
<ul>
    <li class="active"><a href="google.com">Test</a></li>
    <li><a href="google.com">Test2</a></li>
 </ul>
</div>
<div class="overlay"></div>
</body>

CSS：

#fixed{
position:fixed;
text-align: center;
right:0;
background:#fff;
height: 100%;
box-shadow: 0 0 5px 1px #888;
width: 100px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
z-index:10;
    }
ul li{
background: #000;
}

.active{
background-color:#fff;
position:relative;
z-index:11;
}

如果我使用float：right;对于固定侧边栏而不是位置：固定;它就像一个魅力。但我需要固定位置，因为侧边栏需要与页面一起滚动并且高度为100％。

有没有办法在固定元素中包含z-index？

编辑：就像克里斯提到的那样，它只能在Chrome中运作

Answer 1

这实际上是一个Google Chrome错误，如果您在其他浏览器中尝试它，它应该有效。

如果您将#fixed设置为position: absolute;，那么它将不再落后于.overlay。

从叠加位置获取特定元素：已修复

1 个答案: