Z-index不工作与固定定位

我有一个具有默认位置的div(即position:static)和一个具有fixed位置的div。

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

    #over {
width: 600px;
z-index: 10;
}
    

#under {
position: fixed;
top: 5px;
width: 420px;
left: 20px;
border: 1px solid;
height: 10%;
background: #fff;
z-index: 1;
}
    <!DOCTYPE html>
<html>
<body>
<div id="over">
Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>
<div id="under">
</div>
</body>
</html>

或者在jsfiddle这里:http://jsfiddle.net/mhFxf/

我可以使用 position:absolute 在静态元素上，但谁能告诉我为什么这是发生的?< / p >

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

601947 次浏览
小开

z - index只适用于特定的上下文中，即relative， fixed或absolute位置。

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

编辑 这是一个不完整的答案。此答案提供错误信息。请查看下面@Dansingerman的评论和例子。

小开

将position: relative添加到#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;
}
    <!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>

小提琴

小开

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

下面是jsfiddle: 小提琴的例子

编辑:我看到有人已经提到了这个答案!

小开

给#under一个负的z-index，例如-1

发生这种情况是因为z-index属性在position: static;中被忽略，而position: static;恰好是默认值;所以在你写的CSS代码中，无论你在#over中设置多高，z-index对于两个元素都是1。

通过给#under一个负值，它将位于任何z-index: 1;元素的后面，即#over。

小开

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

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

小开

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

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

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

小开

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

小开
最佳答案

这个问题可以用很多方法来解决，但实际上，知道叠加规则可以让你找到最适合你的答案。

解决方案

<html>元素是你唯一的堆叠上下文，所以只要遵循堆叠上下文中的堆叠规则，你就会看到元素是按这个顺序堆叠的

  1. 堆叠上下文的根元素(在本例中为<html>元素)
  2. z指数为负的定位元素(及其子元素)(较高的值堆叠在较低的值前面;具有相同值的元素根据在HTML中的外观进行堆叠)
  3. 未定位的元素(按HTML中的外观排序)
  4. z-index值为auto的定位元素(及其子元素)(根据在HTML中的外观排序)
  5. z指数为正的定位元素(及其子元素)(较高的值堆叠在较低的值前面;具有相同值的元素根据在HTML中的外观进行堆叠)

所以你可以

  1. 设置z-index为-1，对于#under定位-ve z-index出现在未定位的#over元素后面
  2. 将#over的位置设置为relative，以便规则5适用于它

真正的问题

在尝试更改元素的堆叠顺序之前，开发人员应该了解以下内容。

  1. 堆叠上下文形成时
    • 默认情况下，<html>元素是根元素，是第一个堆叠上下文
      • 李< / ul > < / >
    • 堆叠上下文中的堆叠顺序

下面的堆叠顺序和堆叠上下文规则都来自这个链接

当形成堆叠上下文时

堆叠上下文中的堆叠顺序

元素的顺序:

  1. 堆叠上下文的根元素(<html>元素是默认情况下唯一的堆叠上下文，但任何元素都可以是堆叠上下文的根元素，参见上面的规则)
    • 不能将子元素放在根堆栈上下文元素后面
      • 李< / ul > < / >
    • z指数为负的定位元素(及其子元素)(较高的值堆叠在较低的值前面;具有相同值的元素根据在HTML中的外观进行堆叠)
    • 未定位的元素(按HTML中的外观排序)
    • z-index值为auto的定位元素(及其子元素)(根据在HTML中的外观排序)
    • z指数为正的定位元素(及其子元素)(较高的值堆叠在较低的值前面;具有相同值的元素根据在HTML中的外观进行堆叠)

提交答案