z-index不适用于固定定位

Posted 2021-03-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了z-index不适用于固定定位相关的知识，希望对你有一定的参考价值。

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

如果我设置元素的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来解决这个问题，但任何人都可以告诉我为什么会这样吗？

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

答案

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

Solutions

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

堆叠上下文的根元素（在这种情况下为<html>元素）

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

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

z-index值为auto的定位元素（及其子元素）（按HTML中的外观排序）

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

所以你可以

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

The Real Problem

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

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

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

When a stacking context is formed

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

Stacking Order within a Stacking Context

元素的顺序：

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

另一答案

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

另一答案

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

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

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

另一答案

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

这是你在jsfiddle上的例子：Fiddle

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

另一答案

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

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

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