Css 从覆盖中获取特定元素的位置：固定_Css_Overlay_Css Position

Css 从覆盖中获取特定元素的位置：固定

css

Css 从覆盖中获取特定元素的位置：固定,css,overlay,css-position,Css,Overlay,Css Position,我有一个侧边栏的位置：固定；在我的模板的右侧。我也有一个覆盖整个页面。我希望侧边栏中的一个元素（列表元素）被标记为活动的，并位于覆盖的前面。我有一个关于js fiddle的例子： HTML: 如果我使用float：对；对于固定边栏而不是位置：固定；它就像一个符咒。但我需要的位置固定，因为侧边栏需要与页面滚动，并有一个100%的高度有没有办法在一个固定的元素中有一个z索引编辑：就像Chris提到的那样，它在Chrome中唯一不起作用的地方其实是Google Chrome的一个bug，如果你

我有一个侧边栏的位置：固定；在我的模板的右侧。我也有一个覆盖整个页面。我希望侧边栏中的一个元素（列表元素）被标记为活动的，并位于覆盖的前面。我有一个关于js fiddle的例子：

HTML:

如果我使用float：对；对于固定边栏而不是位置：固定；它就像一个符咒。但我需要的位置固定，因为侧边栏需要与页面滚动，并有一个100%的高度

有没有办法在一个固定的元素中有一个z索引

编辑：就像Chris提到的那样，它在Chrome中唯一不起作用的地方其实是Google Chrome的一个bug，如果你在其他浏览器中尝试它，它应该会起作用

如果将

#fixed

设置为

位置：绝对

那么它就不会在

.overlay

后面了。

你的项目已经在覆盖层前面了吗？试着在整个片段周围添加一个包装器，并将其高度设置为固定值，如300px，然后将侧边栏改回右侧浮动。就像Chris提到的，这看起来像是Chrome的问题。好的，你是对的，它可以在其他浏览器中工作。。你知道我如何修复chrome吗？还是它真的是一只虫子？

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

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