我有一个默认定位的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,如下所示:

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

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

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

小提琴

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


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

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