z-index 不适用于固定定位 [英] z-index not working with fixed positioning

查看:23
本文介绍了z-index 不适用于固定定位的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个带有默认定位(即 position:static)的 div 和一个带有 fixeddiv位置.

如果我设置元素的 z-indexes,似乎不可能让固定元素落后于静态元素.

 #over {宽度:600px;z-索引:10;}#在下面 {位置:固定;顶部:5px;宽度:420px;左:20px;边框:1px 实心;高度:10%;背景:#fff;z-索引:1;}

 <身体><div id="over">你好你好你好你好你好你好你好你好你好你好你好你好

<div id="下方">

</html>

或者在 jsfiddle 上:http://jsfiddle.net/mhFxf/

我可以通过使用来解决这个问题位置:绝对在静态元素上,但谁能告诉我为什么会发生这种情况?

(似乎有一个与此类似的问题,(固定定位破坏 z-index) 但它没有一个令人满意的答案,因此我在这里用我的示例代码问这个)

解决方案

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

解决方案

<html> 元素是你唯一的堆叠上下文,所以只要遵循堆叠上下文中的堆叠规则,你就会看到元素是按这个顺序堆叠的

<块引用>

  1. 堆叠上下文的根元素(在本例中为 元素)
  2. 具有负 z-index 值的定位元素(及其子元素)(较高的值堆叠在较低值的前面;具有相同值的元素根据 HTML 中的外观堆叠)
  3. 非定位元素(按在 HTML 中的外观排序)
  4. z-index 值为 auto(按 HTML 中的外观排序)的已定位元素(及其子元素)
  5. 具有正 z-index 值的定位元素(及其子元素)(较高的值堆叠在较低值的前面;具有相同值的元素根据 HTML 中的外观堆叠)

所以你可以

  1. 设置 z-index 为 -1,对于 #under 定位 -ve z-index 出现在非定位 #over 元素后面
  2. #over的位置设置为relative,这样规则5就适用于它

真正的问题

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

  1. 当堆叠上下文形成时
    • 默认情况下, 元素是根元素,是第一个堆叠上下文
  2. 堆叠上下文中的堆叠顺序

<小时>

下面的堆叠顺序和堆叠上下文规则是从这个链接

当堆叠上下文形成时

堆叠上下文中的堆叠顺序

元素的顺序:

  1. 堆叠上下文的根元素( 元素默认是唯一的堆叠上下文,但任何元素都可以是堆叠上下文的根元素,参见上面的规则)
    • 不能将子元素放在根堆叠上下文元素后面
  2. 具有负 z-index 值的定位元素(及其子元素)(较高的值堆叠在较低值的前面;具有相同值的元素根据 HTML 中的外观堆叠)
  3. 非定位元素(按在 HTML 中的外观排序)
  4. z-index 值为 auto(按 HTML 中的外观排序)的已定位元素(及其子元素)
  5. 具有正 z-index 值的定位元素(及其子元素)(较高的值堆叠在较低值的前面;具有相同值的元素根据 HTML 中的外观堆叠)

I have a div with default positioning (i.e. position:static) and a div with a fixed position.

If I set the z-indexes of the elements, it seems impossible to make the fixed element go behind the static element.

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

Or on jsfiddle here: http://jsfiddle.net/mhFxf/

I can work around this by using position:absolute on the static element, but can anyone tell me why this is happening?

(There seems to be a similar question to this one, (Fixed Positioning breaking z-index) but it doesn't have a satisfactory answer, hence I am asking this here with my example code)

解决方案

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. 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)

这篇关于z-index 不适用于固定定位的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆