我有一个默认定位的div(即位置:静态)和一个固定位置的div。

如果我设置元素的z索引,似乎不可能让固定元素走到静态元素后面。

在{# 宽度:600 px; z - index: 10; } #{下 位置:固定; 上图:5 px; 宽度:420 px; 左:20 px; 边框:1px实体; 高度:10%; 背景:# fff; z - index: 1; } < div id = " / " > 喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂喂 < / div > < div id = "下" > < / div >

或者登录jsfiddle: http://jsfiddle.net/mhFxf/

我可以通过使用 位置:绝对的 在静态元素上,有人能告诉我为什么会这样吗?

(似乎有一个类似的问题,(固定定位打破z指数),但它没有一个满意的答案,因此我在这里问这个与我的示例代码)


当前回答

CSS规范中定义的固定元素(和绝对元素)的行为:

它们表现为与文档分离,并放置在最近的固定/绝对位置父文件中。(不是逐字引用)

这使得zindex计算有点复杂,我通过动态地在body元素中创建一个容器并移动所有这样的元素来解决我的问题(相同的情况)(这些元素在body级别元素中被分类为“my-fixed-ones”)

其他回答

我在做导航菜单。我有溢出:隐藏在我的导航的css隐藏一切。我以为这是一个z指数问题,但实际上我把所有东西都隐藏在导航之外。

这个答案提供了错误的信息。请查看@Dansingerman的评论和例子。


z指数只适用于特定的环境,即相对、固定或绝对位置。

相对div的Z-index与绝对或固定div的Z-index无关。

当元素位于正常流之外时,它们可以重叠其他元素。

根据http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp上的重叠元素部分

添加位置:相对于#over,如下所示:

#over { width: 600px; z-index: 10; position: relative; } #under { position: fixed; top: 14px; width: 415px; left: 53px; border: 1px solid; height: 10%; background: #f0f; z-index: 1; } <div id="over"> <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </> </div> <div id="under"></div>

小提琴

给出负z指数下的#,例如-1

这是因为z-index属性在position: static;中被忽略了,这恰好是默认值;所以在CSS代码中,无论你在#over中设置多高,两个元素的z-index都是1。

通过给#一个负值,它将在任何z-index后面:1;元素,即#over。