【问题标题】：z-index not working with fixed positioningz-index 不适用于固定定位
【发布时间】：2011-07-10 06:55:36
【问题描述】：

我有一个带有默认定位的div（即position:static）和一个带有fixed 位置的div。

如果我设置元素的z-indexes，似乎不可能让固定元素落后于静态元素。

    #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 在静态元素上，但谁能告诉我为什么会发生这种情况？

（似乎有一个与此类似的问题，（Fixed Positioning breaking z-index）但它没有令人满意的答案，因此我在这里用我的示例代码问这个问题）

【问题讨论】：

标签： css z-index

【解决方案1】：

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

相对 div 的

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

编辑 ~~这是一个不完整的答案。~~这个答案提供了虚假信息。请查看@Dansingerman 的评论和下面的示例。

【讨论】：

您能否详细说明 z-index 在特定环境中的工作原理，和/或提供参考？
z-index 会影响两个 div 的顺序，即使一个是相对位置而另一个是绝对位置。
这个答案是错误的。 Here is a fiddle 演示堆栈上下文，正如 here 所解释的那样。 @Dansingerman。
感谢您的 jsFiddle @kbdanman，它帮助我通过视觉理解堆叠上下文。
@JoeMorano，无论绝对定位还是相对定位，较高的 z 都更接近顶部。重要的是文档树中的级别。 div 4、5、6 是 div 3 的子级，而 div 1 和 2 是 div 3 的兄弟姐妹。 div 1 的 z 比 div 3 高，因此 div 1 位于 div 3 及其所有子级之上。 div 2 的 z 低于 div 3，因此 div 3 及其所有子项都位于 div 2 的顶部

【解决方案2】：

将position: relative; 添加到#over

    #over {
      width: 600px;
      z-index: 10;
      position: relative;    
    }
    
    #under {
      position: fixed;
      top: 5px;
      width: 420px;
      left: 20px;
      border: 1px solid;
      height: 10%;
      background: #f0f;
      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>

Fiddle

【讨论】：

updates.html5rocks.com/2012/09/… 是关于位置固定、绝对和相对如何与 z-index 交互的出色参考。
@marflar 我很高兴。顺便说一句，看看你的小提琴。最后还有一个额外的标签</body>和一个额外的标签</html>。
Here is a fiddle 演示堆叠上下文。解释了here。
从 over 元素中删除 position: relative 实际上解决了我的问题。

【解决方案3】：

由于您的over div 没有定位，z-index 不知道在哪里以及如何定位它（以及相对于什么？）。只需将您的上 div 的位置更改为相对位置，这样就不会对该 div 产生副作用，然后下 div 将服从您的意愿。

这是您在 jsfiddle 上的示例：Fiddle

编辑：我看到有人已经提到了这个答案！

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

我也遇到了这个问题 - 将 'under' div 设置为 0 对我有用。

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

CSS 规范中定义的固定元素（和绝对元素）的行为：

它们的行为就像它们与文档分离一样，并放置在最近的固定/绝对定位的父级中。（不是一个字一个字的引用）

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

【讨论】：

【解决方案7】：

我正在构建一个导航菜单。我在导航的 css 中有 overflow: hidden，它隐藏了所有内容。我认为这是一个 z-index 问题，但实际上我将所有内容都隐藏在我的导航之外。

【讨论】：

【解决方案8】：

这个问题可以通过多种方式解决，但实际上，了解堆叠规则可以让您找到最适合您的答案。

解决方案

<html> 元素是您唯一的堆叠上下文，因此只需遵循堆叠上下文中的堆叠规则，您就会看到元素按此顺序堆叠

堆叠上下文的根元素（本例中为 <html> 元素）

具有负 z-index 值的定位元素（及其子元素）（较高值堆叠在较低值之前；具有相同值的元素根据 HTML 中的外观堆叠）

非定位元素（按 HTML 中的外观排序）

具有自动 z-index 值的定位元素（及其子元素）（按 HTML 中的外观排序）

具有正 z-index 值的定位元素（及其子元素）（较高值堆叠在较低值前面；具有相同值的元素根据 HTML 中的外观堆叠）

所以你可以

设置 z-index 为 -1，因为 #under 定位 -ve z-index 出现在非定位 #over 元素后面
将#over的位置设置为relative，这样规则5就适用了

真正的问题

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

形成堆叠上下文时
- 默认情况下，<html> 元素是根元素，是第一个堆叠上下文
堆叠上下文中的堆叠顺序

The Stacking order and stacking context rules below are from this link

当堆叠上下文形成时

当元素是文档的根元素时（<html> 元素）
当元素具有非静态的位置值和非自动的 z-index 值时
当元素的不透明度值小于 1 时
一些较新的 CSS 属性也会创建堆叠上下文。其中包括：转换、过滤器、css 区域、分页媒体，可能还有其他。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
作为一般规则，如果 CSS 属性需要在屏幕外上下文中呈现，则它必须创建一个新的堆叠上下文。

堆叠上下文中的堆叠顺序

元素的顺序：

堆叠上下文的根元素（<html> 元素默认是唯一的堆叠上下文，但任何元素都可以是堆叠上下文的根元素，参见上面的规则）
- 您不能将子元素放在根堆叠上下文元素的后面
具有负 z-index 值的定位元素（及其子元素）（较高值堆叠在较低值之前；具有相同值的元素根据 HTML 中的外观堆叠）
非定位元素（按 HTML 中的外观排序）
具有自动 z-index 值的定位元素（及其子元素）（按 HTML 中的外观排序）
具有正 z-index 值的定位元素（及其子元素）（较高值堆叠在较低值前面；具有相同值的元素根据 HTML 中的外观堆叠）

【讨论】：