我有一个默认定位的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指数),但它没有一个满意的答案,因此我在这里问这个与我的示例代码)


当前回答

由于over div没有定位,z索引不知道在哪里以及如何定位它(关于什么?)只要改变你的上方div的位置为相对,所以没有副作用的div,然后下面的div将服从你的意愿。

下面是关于jsfiddle的示例。

其他回答

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


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

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

添加位置:相对于#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>

小提琴

由于over div没有定位,z索引不知道在哪里以及如何定位它(关于什么?)只要改变你的上方div的位置为相对,所以没有副作用的div,然后下面的div将服从你的意愿。

下面是关于jsfiddle的示例。

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

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

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

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

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