Z索引不适用于固定定位

CSS

StafanDavaid

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

第2276篇《Z索引不适用于固定定位》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共8个回答
Mandy 2020.03.19

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

阳光小小 2020.03.19

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

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

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

神无L 2020.03.19

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

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

十三凯 2020.03.19

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

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

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

达蒙梅 2020.03.19

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

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

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

乐猴子樱 2020.03.19

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

这是您在jsfiddle上的示例：Fiddle

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

Davaid梅 2020.03.19

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

小提琴

小卤蛋A 2020.03.19

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

  1. The stacking context’s root element (the <html> element in this case)
  2. 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)
  3. Non-positioned elements (ordered by appearance in the HTML)
  4. Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
  5. 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

  1. set a z-index of -1, for #under positioned -ve z-index appear behind non-positioned #over element
  2. 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.

  1. When a stacking context is formed
    • By default, the <html> element is the root element and is the first stacking context
  2. 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:

  1. 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
  2. z索引值为负的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
  3. 未定位的元素（按HTML中的外观排序）
  4. 定位元素（及其子元素）的z-index值为auto（按HTML中的外观排序）
  5. 具有正z-index值的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android