Z索引不适用于固定定位

小编典典

Z索引不适用于固定定位

css

我有一个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>

我可以通过position:absolute 在static元素上使用来解决此问题，但是有人可以告诉我 为什么会 这样吗？

（似乎有一个与此问题类似的问题，固定位置破坏了z-index，但是它没有令人满意的答案，因此我在这里用示例代码来询问）

阅读 266

2020-05-16

共1个答案

小编典典

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

解决方案

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

堆栈上下文的根元素（<html>在本例中为元素）
z索引值为负的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
未定位的元素（按HTML中的外观排序）
定位元素（及其子元素）的z-index值为auto（按HTML中的外观排序）
具有正z索引值的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）

所以你可以

将z-index设置为-1，以使#under-ve z-index出现在未定位#over元素的后面
设置的位置#over，以relative使第5条适用于它

真正的问题

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

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

形成堆叠上下文时

当元素是文档的根元素时（该<html>元素）
当元素的位置值不是静态的并且z索引值不是auto时
当元素的不透明度值小于1时
几个较新的CSS属性也创建了堆栈上下文。其中包括：转换，过滤器，css区域，分页媒体，以及其他。
通常，如果CSS属性需要在屏幕外的上下文中进行渲染，则它必须创建一个新的堆栈上下文。

堆叠上下文中的堆叠顺序

元素顺序：

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

2020-05-16