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


当前回答

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


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

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

其他回答

给出负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的示例。

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