我有一个默认定位的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”)

其他回答

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

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

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

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

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

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

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

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

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

下面是关于jsfiddle的示例。

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

小提琴