解决方案

Question

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

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

    #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），但它没有一个令人满意的答案，因此我在这里用我的示例代码问这个问题）

Answer 1

将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: #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>

Fiddle

Answer 2

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

解决方案

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

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

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

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

z-index值为auto的定位元素（及其子元素）（按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>元素）
当元素具有静态以外的位置值和除auto
当元素的不透明度值小于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值为auto的定位元素（及其子元素）（按HTML中的外观排序）
具有正z-index值的定位元素（及其子元素）（较高值堆叠在较低值之前;具有相同值的元素根据HTML中的外观堆叠）

Answer 3

z-index 仅适用于特定情境，即relative，fixed或absolute位置。

相对div的

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

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

Answer 4

因为你的over div没有定位，所以z-index不知道在哪里以及如何定位它（以及关于什么？）。只需将你的div的位置改为亲戚，这样就不会对div产生任何副作用，然后under div会服从你的意志。

这是你在jsfiddle上的例子：Fiddle

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

Answer 5

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

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

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

Answer 6

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

Answer 7

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

根据http://web.archive.org/web/20130501103219/http://w3schools.com/css/css_positioning.asp

上的重叠元素部分

Answer 8

CSS Spec：

中定义的固定元素（和绝对元素）的行为

它们与文档分离时的行为，并放置在最近的固定/绝对定位父项中。（不是逐字逐句）

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

z-index不适用于固定定位

8 个答案:

解决方案

真正的问题

形成堆叠上下文时

堆叠上下文中的堆叠顺序