Z索引不适用于固定定位

422

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

css  z-index 
— 丹·辛格曼
source

Answers:

146

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

解决方案

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

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

所以你可以

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

真正的问题

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

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

下面的堆叠顺序和堆叠上下文规则来自此链接

形成堆叠上下文时

堆叠上下文中的堆叠顺序

元素顺序：

  1. 堆栈上下文的根元素（<html>默认情况下，该元素是唯一的堆栈上下文，但是任何元素都可以是堆栈上下文的根元素，请参见上面的规则）
    • 您不能将子元素放在根堆栈上下文元素后面
  2. z索引值为负的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
  3. 未定位的元素（按HTML中的外观排序）
  4. 定位元素（及其子元素）的z-index值为auto（按HTML中的外观排序）
  5. 具有正z索引值的定位元素（及其子元素）（较高的值堆叠在较低的值前面；具有相同值的元素根据HTML中的外观堆叠）
— Mr_Moneybags
source
3
有些人可能也觉得这很有帮助：关于Z-Index的无人问津
— 心理学家
450

添加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>
展开摘要

小提琴

— 史蒂芬·默多克
source
14
updates.html5rocks.com/2012/09/…是有关位置固定，绝对和相对如何与z-index相互作用的极佳参考。
— 2013年
@marflar我的荣幸。顺便说一句，看看你的小提琴。最后有一个额外的标签</body>和一个额外的标签</html>。
— 2014年
2
这是一个展示堆叠上下文的小提琴。在这里解释。
— kdbanman
position: relative从over元素中删除实际上解决了我的问题。
— Alex G
Thankssssssss <3
— Karl Anthony Baluyot19年
32

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

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

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

— cusimar9
source
3
您能否扩展z-index在特定上下文中的工作方式和/或提供参考？
— DanSingerman 2011年
13
z-index会影响两个div的顺序，即使一个是相对位置而另一个是绝对位置也是如此。
— 拉斐尔2012年
65
这个答案是错误的。 这是一个小提琴，展示了堆栈上下文，在这里对其进行了说明。@丹辛曼
— kdbanman
1
感谢您的jsFiddle @kbdanman，它通过视觉帮助我理解了堆栈上下文。
— dhruvpatel 2014年
8
@JoeMorano，无论绝对位置还是相对位置，“ z较高”都更靠近顶部。重要的是文档树中的级别。Divs 4、5、6是div 3的子级，而div 1和2是div 3的同级子。div1的z值高于div 3，因此div 1在div 3及其所有子级之上。第2分区的z值比第3分区低，因此div 3及其所有子级都位于div 2上方
— kdbanman 2015年
31

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

这是您在jsfiddle上的示例：Fiddle

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

— 我是认真的
source
18

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

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

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

— 卡洛斯·普雷西奥索（Carlos Precioso）
source
我也有这个问题-将'under'div设置为0对我有用。
— 米克·塞尔
5

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

— Thedanotto
source
0

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

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

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

— 巴赫希
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.