Z索引不适用于固定定位

StafanDavaid2020-03-19

我有一个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 在static元素上使用来解决此问题，但是有人可以告诉我为什么会这样吗？

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

Mandy2020/03/19 10:41:24

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

阳光小小2020/03/19 10:41:24

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

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

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

神无L2020/03/19 10:41:24

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

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

十三凯2020/03/19 10:41:24

给#under负数z-index，例如-1

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

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

达蒙梅2020/03/19 10:41:23

z索引仅在特定上下文即内工作relative，fixed或absolute位置。

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

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

乐猴子樱2020/03/19 10:41:23

由于您的overdiv没有定位，因此z-index不知道将其定位在何处以及如何定位（以及关于什么？）。只需将上方div的位置更改为相对位置即可，因此该div上没有任何副作用，那么下方div将服从您的意愿。

这是您在jsfiddle上的示例：Fiddle

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

Davaid梅2020/03/19 10:41:23

添加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>

小提琴

小卤蛋A2020/03/19 10:41:23

This question can be solved in a number of ways, but really, knowing the stacking rules allows you to find the best answer that works for you.

Solutions

The <html> element is your only stacking context, so just follow the stacking rules inside a stacking context and you will see that elements are stacked in this order

The stacking context’s root element (the <html> element in this case)

Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

Non-positioned elements (ordered by appearance in the HTML)

Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)

Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

So you can

set a z-index of -1, for #under positioned -ve z-index appear behind non-positioned #over element
set the position of #over to relative so that rule 5 applies to it

The Real Problem

Developers should know the following before trying to change the stacking order of elements.

When a stacking context is formed
- By default, the <html> element is the root element and is the first stacking context
Stacking order within a stacking context

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

When a stacking context is formed

When an element is the root element of a document (the <html> element)
When an element has a position value other than static and a z-index value other than auto
When an element has an opacity value less than 1
Several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.

Stacking Order within a Stacking Context

The order of elements:

The stacking context’s root element (the <html> element is the only stacking context by default, but any element can be a root element for a stacking context, see rules above)
- You cannot put a child element behind a root stacking context element
z索引值为负的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
未定位的元素（按HTML中的外观排序）
定位元素（及其子元素）的z-index值为auto（按HTML中的外观排序）
具有正z-index值的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer