index堆叠规则,absolute无法冲破的等级

不起眼的 z-index 却能牵扯出这么大的学问

2016/04/30 · CSS · z-index

原文出处: 北风吹雪   

z-index在日常开发中算是一个比较常用的样式,一般理解就是设置标签在z轴先后顺序,z-index值大的显示在最前面,小的则会被遮挡,是的,z-index的实际作用就是这样。

但是你真的了解z-index吗?你知道它有什么特性吗?这里先抛出几个名词:“层叠顺序(stacking order)”,“层叠上下文(stacking context)”,“层叠水平(stacking level)”。

先说一下z-index的基本用法:

z-index可以设置成三个值:

  • auto,默认值。当设置为auto的时候,当前元素的层叠级数是0,同时这个盒不会创建新的层级上下文(除非是根元素,即<html>);
  • <integer>。指示层叠级数,可以使负值,同时无论是什么值,都会创建一个新的层叠上下文;
  • inherit。父元素继承

z-index只在定位元素中起作用,举栗子:

XHTML

<style> #box1{ background: blue; width: 200px; height: 200px; } #box2{ background: yellow; width: 200px; height: 200px; margin-top:-100px; } </style> <div id="box1"></div> <div id="box2"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
    #box1{
        background: blue;
        width: 200px;
        height: 200px;
    }
    #box2{
        background: yellow;
        width: 200px;
        height: 200px;
        margin-top:-100px;
    }
      
</style>
<div id="box1"></div>
<div id="box2"></div>

我们希望box1要显示在box2上面,可能这时候有同学会说,给box1加一个z-index大于0的值就可以了,这样是不对的,如图:

图片 1

box2遮挡了box1,即使box1设置z-index值再大也白搭,前面说了z-index只在定位元素(position=static除外,因为元素默认就是static,相当于没用position样式)中作用,也是就z-index要配合position一起使用感兴趣的可以亲自验证一下,这里只抛砖引玉。

层叠顺序对绝对元素的Z轴顺序

层叠顺序其实不是z-index独有的,每个元素都有层叠顺序,元素渲染的先后顺序跟它有很大关系,总之当元素发生层叠时,元素的层级高的会优先显示在上面,层级一样的则会根据dom的先后顺序进行渲染,后面的会覆盖前面的。文字再多可能也没有一张图来的直接,下面这张图是“七阶层叠水平”(网上盗的,很经典的一张图)

图片 2

再举个栗子,这里还是拿刚才那个栗子来说,在不用z-index的前提下,利用css层叠顺序解决遮挡问题,代码修改如下

CSS

<style> #box1{ background: blue; width: 200px; height: 200px; display:inline-block; } #box2{ background: yellow; width: 200px; height: 200px; margin-top:-100px; } </style> <div id="box1"></div> <div id="box2"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    #box1{
        background: blue;
        width: 200px;
        height: 200px;
        display:inline-block;
    }
    #box2{
        background: yellow;
        width: 200px;
        height: 200px;
        margin-top:-100px;
    }
      
</style>
<div id="box1"></div>
<div id="box2"></div>

这里只做了细微的修改,就是给box1加了一个display:inline-block;的样式,这里解释一下,首先box1和box2发生了层叠,然后box默认为块级元素,即display:block,从七阶图中看出,display:block的元素的层叠水平低于display:inline-block的元素,所以浏览器就将box2渲染到box1上面,如图:

图片 3

灵活的运用七阶图可以让你的代码尽可能的减少z-index的使用。因为多个人开发同一个系统,如果过多的用z-index,很有可能会出现冲突,即遮挡问题,一般来说z-index使用10以内的数值就足够了。

重点:层叠上下文

  先说一下如果创建层叠上下文,css创建层叠上下文的方法有很多,但是常用的也就够那么几种

  1、定位元素中z-index不等于auto的会为该元素创建层叠上下文

  2、html根元素默认会创建层叠上下文(这是一个特例,知道就行)

  3、元素的opacity不等于1会创建层叠上下文

  4、元素的transform不等于none会创建层叠上下文

还有其它方式创建层叠上下文,这里就不做介绍了,上面四中是开发中常用到的。

那么知道怎么创建层叠上下文之后,问题的关键来了,层叠上下文有什么用呢?

这里一定要结合前面那张七阶图,最下面那一层background便是是建立在层叠上下文的基础上的,也就是说在层叠上下文中,所有的元素都会渲染在该元素的层叠上下文背景和边框上面;在block盒子、float盒子等不存在层级上下文的元素中,子元素设置z-index为负值的时候,**那么子元素会被父元素遮挡**。说了可能不太好理解,举个栗子消化一下:

XHTML

<style> #box1{ position: relative; width: 200px; height: 200px; background: blue; } #box2{ position: relative; z-index:-1; width: 100px; height: 100px; background: yellow; } </style> <div id="box1"> <div id="box2"></div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    #box1{
        position: relative;
        width: 200px;
        height: 200px;
        background: blue;
    }
    #box2{
        position: relative;
        z-index:-1;
        width: 100px;
        height: 100px;
        background: yellow;
    }
</style>
 
<div id="box1">
      <div id="box2"></div>
</div>

里,box并没有创建层叠上下文,当子元素box2设置z-index:-1时,box2所在的层叠上下文是根元素,即html根标签,根据七阶图可以看出,box2会渲染在html标签上面,普通盒子box1(z-index:auto)下面,所以box2被遮挡了。如图所示:

图片 4

那么怎么解决这个问题呢?相信大家已经知道这里该怎么处理了吧,是的,为box1建立一个层叠上下文,那么box1中的元素无论z-index是负的多少,都会显示在box1的背景之上,如图:

图片 5

这里我用了前面说的的第一种方式去创建层叠上下文,即定位元素中z-index不为auto的元素会建立层叠上下文,可能有的同学开始纳闷了,box1的z-index小于box2的z-index,为什么box2缺显示在box1的上面呢?呵呵,这正对应了七阶图的层叠水平的关系,不明白的再仔细揣摩一下七阶图

· 层叠水平仅在直接父级层叠上下文中进行比较,即层叠上下文A中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较。举个例子

XHTML

<style> #box1{ z-index: 10; position: relative; width: 200px; height: 200px; background: green; } #box1_1{ position: relative; z-index: 100; width: 100px; height: 100px; background: blue; } #box2{ position: relative; z-index: 11; width: 200px; height: 200px; background: red; margin-top: -150px; } </style> <div id="box1"> <div id="box1_1"> </div> </div> <div id="box2"> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<style>
    #box1{
        z-index: 10;
        position: relative;
        width: 200px;
        height: 200px;
        background: green;
    }
    #box1_1{
        position: relative;
        z-index: 100;
        width: 100px;
        height: 100px;
        background: blue;
    }
    #box2{
        position: relative;
        z-index: 11;
        width: 200px;
        height: 200px;
        background: red;
        margin-top: -150px;
    }
</style>
 
<div id="box1">
    <div id="box1_1">    
    </div>
</div>
 
<div id="box2">
</div>

叠上下文box1中的子元素box2设置z-index为100,而层叠上下文box2的z-index只有11,而实际的渲染效果却是,box2在box1和box1_1的上面,这就应了上面那就话,层叠水平仅在元素的第一个父级层叠上下文中进行,即层叠上下文A中的子元素的层叠水平不会和另一个层叠上下文中的子元素进行比较,也就是活box1_1的z-index对于他的父级层叠上下文之外的元素没有任何影响。这里box2和box1在同一个层叠上下文中(html根元素会默认创建层叠上下文),所以它们两个会进行层叠水平的比较,box2的z-index大于box1的z-index,所以我们看到的也就是下面这样,box2遮挡了box1,不在乎box1中的子元素z-index是多少,如图:

图片 6

这里我对z-index的理解也就讲述完毕了,大概就说了以下这几点内容:

  1、z-index仅在定位元素(position不等于static)中有效

  2、七阶层叠水平图

  3、z-index层叠水平的比较仅限于父级层叠上下文中

其次需要注意以下几点:

  1、在开发中尽量避免层叠上下文的多层嵌套,因为层叠上下文嵌套过多的话容易产生混乱,如果对层叠上下文理解不够的话是不好把控的。

  2、非浮层元素(对话框等)尽量不要用z-index(通过层叠顺序或者dom顺序或者通过层叠上下文进行处理)

  3、z-index设置数值时尽量用个位数

用了一晚上的时间整理了这篇文章,就连我自己对z-index也有了更加深刻的理解,希望对你也有帮助。如有错误 欢迎指正

2 赞 6 收藏 评论

图片 7

z-index堆叠规则,z-index堆叠

前段时间记得好像是谁在群里提出了一个实在是让大家都觉得很不理解的一个问题:

CSS3 中的层叠上下文初探

2015/10/09 · CSS · 层叠上下文

原文出处: HaoyCn   

前言:关于层叠上下文,笔者还没有去阅读更详细的 W3C 规范来了解更本质的原理(表打我,等我校招拿到 offer 了我就读好伐 T_T)。一直听说 CSS3 里的层叠上下文有新情况,但没找到很好的参考资料,故自己实战一把。鉴于笔者水平有限,如有任何遗漏或者错误,则恳请读者斧正。

一、z-index

z-index用来控制元素重叠时堆叠顺序。

适用于:已经定位的元素(即position:relative/absolute/fixed)。

一般理解就是数值越高越靠上,好像很简单,但是当z-index应用于复杂的HTML元素层次结构,其行为可能很难理解甚至不可预测。因为z-index的堆叠规则很复杂,下面一一道来。

首先解释一个名词:

stacking context:翻译就是“堆叠上下文”。每个元素仅属于一个堆叠上下文,元素的z-index描述元素在相同堆叠上下文中“z轴”的呈现顺序。

z-index取值:

默认值auto:

当页面新生成一个box时,它默认的z-index值为auto,意味着该box不会自己产生一个新的local stacking context,而是处于和父box相同的堆叠上下文中。

正/负整数

这个整数就是当前box的z-index值。z-index值为0也会生成一个local stacking context,这样该box父box的z-index就不会和其子box做比较,相当于隔离了父box的z-index和子box的z-index。

接下来从最简单的不使用z-index的情况开始将,循序渐进。

  1. <ul>
  2. <li>第一块</li>
  3. <li><span>第二块</span></li>
  4. <li>第三块</li>
  5. <li>第四块</li>
  6. <li>第五块</li>
  7. </ul>

1 CSS2.1 中规定的层叠上下文图片 8

Background and borders — of the element forming the stacking context. The lowest level in the stack.

Negative Z-Index — the stacking contexts of descendants elements with negative z-index.

Block Level Boxes — in-flow non-inline-level non-positioned descendants.

Floated Boxes — non-positioned floats

Inline Boxes — in-flow inline-level non-positioned descendants.

Z-index: 0 — positioned elements. These form new stacking contexts.

Positive Z-index — positioned elements. The highest level in the stack.

图文来源:http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property–webdesign-16892

现在该笔者上场翻译了!在解释上面术语之前,需要阐明两个术语:“定位”指的是 position 为 relative 、absolutefixed 的元素,“非定位”则相反。

  • 背景和边框:建立层叠上下文元素的背景和边框。层叠中的最低级
  • 负 Z-indexz-index 为负的后代元素建立的层叠上下文
  • 块级盒:文档流内非行内级非定位后代元素
  • 浮动盒:非定位浮动元素(笔者注:即排除了 position: relative 的浮动盒)
  • 行内盒:文档流内行内级非定位后代元素
  • Z-index: 0:定位元素。这些元素建立了新层叠上下文(笔者注:不一定,详见后文)
  • 正 Z-index:(z-index 为正的)定位元素。层叠的最高等级

引文如上所表。但笔者提醒各位读者一点,“Z-index: 0”级的定位元素不一定就会建立新的层叠上下文。因为:

CSS2.1:(z-index: auto)The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.

当定位元素 z-index: auto,生成盒在当前层叠上下文中的层级为 0。但该盒不建立新的层叠上下文,除非是根元素。

规范是这样,但 IE6-7 有个 BUG,定位元素即便 z-index: auto 照样创建层叠上下文。

以上是基于 CSS2.1 的层叠上下文介绍。下面要阐述的是在 CSS3 新环境下,层叠上下文的新变化。

二、不使用 z-index时堆叠顺序

不使用z-index的情况,也是默认的情况,即所有元素都不用z-index时,堆叠顺序如下(从下到上)

  • 根元素(即HTML元素)的background和borders
  • 正常流中非定位后代元素(这些元素顺序按照HTML文档出现顺序)
  • 已定位后代元素(这些元素顺序按照HTML文档出现顺序)

解释一下后两条规则:

  • 正常流中非positoned element元素,总是先于positioned element元素渲染,所以表现就是在positioned element下方,跟它在HTML中出现的顺序无关。
  • 没有指定z-index值的positioned element,他们的堆叠顺序取决于在HTML文档中的顺序,越靠后出现的元素,位置越高,和position属性无关。

例子:

图片 9<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Stacking without z-index</title> <style type="text/css"> div { font: 12px Arial; text-align: center; } .bold { font-weight: bold; } .opacity{opacity: 0.7;} #normdiv { height: 70px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 50px 0px 50px; } #reldiv1 { height: 100px; position: relative; top: 30px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #reldiv2 { height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #absdiv1 { position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #990000; background-color: #ffdddd; } #absdiv2 { position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #990000; background-color: #ffdddd; } </style> </head> <body> <br /><br /> <div id="absdiv1" class="opacity"> <br /><span class="bold">DIV #1</span> <br />position: absolute; </div> <div id="reldiv1" class="opacity"> <br /><span class="bold">DIV #2</span> <br />position: relative; </div> <div id="reldiv2" class="opacity"> <br /><span class="bold">DIV #3</span> <br />position: relative; </div> <div id="absdiv2" class="opacity"> <br /><span class="bold">DIV #4</span> <br />position: absolute; </div> <div id="normdiv"> <br /><span class="bold">DIV #5</span> <br />no positioning </div> </body> </html> View Code

有图有真相:

图片 10

 分析:

#5没有定位,处于正常流,所以根据以上规则,先于#1,#2,#3,#4这些已定位元素渲染,在最下方。

#1,#2,#3,#4都是已定位元素,且未设置z-index,所以根据其在文档中出现的顺序依次被渲染,可以去掉apacity查看清晰效果。

如果我我们设定LI为position:relative;设置span为position:absolute;那么我们会发现无论SPAN的z-index值设置得再高都将永远在后面父级的下面。

2 CSS3 带来的变化

总的来说变化可以归为两点,我们之后一一探讨:

  1. CSS3 中许多属性会创建局部层叠上下文
  2. tranform 属性改变绝对定位子元素的包含块

三、浮动堆叠顺序

浮动元素z-index位置介于非定位元素和定位元素之间。(从下到上)

  • 根元素(即HTML元素)的背景和border
  • 正常流中非定位后代元素(这些元素顺序按照HTML文档出现顺序)
  • 浮动元素(浮动元素之间是不会出现z-index重叠的)
  • 正常流中inline后代元素
  • 已定位后代元素(这些元素顺序按照HTML文档出现顺序)

 non-positioned元素的背景和边界没有被浮动元素影响,但是元素中的内容受影响(浮动布局特性)

举例:

图片 11<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Stacking and float</title> <style type="text/css"> div { font: 12px Arial; text-align: center; } .bold { font-weight: bold; } .opacity{ opacity: 0.7;} #absdiv1 { position: absolute; width: 150px; height: 200px; top: 10px; right: 140px; border: 1px dashed #990000; background-color: #ffdddd; } #normdiv { /* opacity: 0.7; */ height: 100px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 10px 0px 10px; text-align: left; } #flodiv1 { margin: 0px 10px 0px 20px; float: left; width: 150px; height: 200px; border: 1px dashed #009900; background-color: #ccffcc; } #flodiv2 { margin: 0px 20px 0px 10px; float: right; width: 150px; height: 200px; border: 1px dashed #009900; background-color: #ccffcc; } #absdiv2 { position: absolute; width: 150px; height: 100px; top: 130px; left: 100px; border: 1px dashed #990000; background-color: #ffdddd; } </style> </head> <body> <br /><br /> <div id="absdiv1" class="opacity"> <br /><span class="bold">DIV #1</span> <br />position: absolute; </div> <div id="flodiv1" class="opacity"> <br /><span class="bold">DIV #2</span> <br />float: left; </div> <div id="flodiv2" class="opacity"> <br /><span class="bold">DIV #3</span> <br />float: right; </div> <br /> <div id="normdiv"> <br /><span class="bold">DIV #4</span> <br />no positioning </div> <div id="absdiv2" class="opacity"> <br /><span class="bold">DIV #5</span> <br />position: absolute; </div> </body> </html> View Code

图片 12

分析:

#4是正常流中非定位的元素,所以先被渲染,在最底层。

#2 #3一个左浮动,一个右浮动,接着被渲染。彼此不会因为z-index值被覆盖。见下图。

#1 #5为已定位的元素,最后被渲染,当浏览器窗口变小时,#5在#1上面,因为HTML文档中#5在#1后面。见下图。

 图片 13

  1. *{margin:0; padding:0; list-style:none;}
  2. li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;}
  3. li span {width:200px; height:100px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}

2.1 产生新层叠上下文的情况

以下情况会产生新的层叠上下文:

  • 根元素(HTML)
  • 绝对或相对定位且 z-index 值不为 auto
  • 一个伸缩项目 Flex Item,且 z-index 值不为 auto,即父元素 display: flex|inline-flex
  • 元素的 opacity 属性值小于 1
  • 元素的 transform 属性值不为 none
  • 元素的 mix-blend-mode 属性值不为 normal
  • 元素的 filter 属性值不为 normal
  • 元素的 isolation 属性值为 isolate
  • position: fixed
  • will-change 中指定了上述任意属性,即便你没有直接定义这些属性
  • 元素的 -webkit-overflow-scrolling 属性值为 touch

以上列表译自:

,提醒广大读者,别看中文版,因为中文版并非实时跟进更新的,且翻译不太准确

四、z-index

默认的堆叠顺序上面说了,要想改变 元素的堆叠顺序就得用到z-index。

Note:前两种情况中,虽然有元素之间的重叠覆盖,但是它们都是处在同一个z-layer的。因为没有设置z-index属性,默认的渲染层就是layer 0。所以要注意,不同层中元素之间覆盖是理所当然的,但是同一层中的元素也会发送覆盖。

z-index只适用于已经定位的元素(即position:relative/absolute/fixed)。

举例:

图片 14<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Stacking without z-index</title> <style type="text/css"> div { font: 12px Arial; text-align: center; opacity: 0.7; } .bold { font-weight: bold; } #normdiv { z-index: 8; height: 70px; border: 1px dashed #999966; background-color: #ffffcc; margin: 0px 50px 0px 50px; } #reldiv1 { z-index: 3; height: 100px; position: relative; top: 30px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #reldiv2 { z-index: 2; height: 100px; position: relative; top: 15px; left: 20px; border: 1px dashed #669966; background-color: #ccffcc; margin: 0px 50px 0px 50px; } #absdiv1 { z-index: 5; position: absolute; width: 150px; height: 350px; top: 10px; left: 10px; border: 1px dashed #990000; background-color: #ffdddd; } #absdiv2 { z-index: 1; position: absolute; width: 150px; height: 350px; top: 10px; right: 10px; border: 1px dashed #990000; background-color: #ffdddd; } </style> </head> <body> <br /><br /> <div id="absdiv1"> <br /><span class="bold">DIV #1</span> <br />position: absolute; <br />z-index: 5; </div> <div id="reldiv1"> <br /><span class="bold">DIV #2</span> <br />position: relative; <br />z-index: 3; </div> <div id="reldiv2"> <br /><span class="bold">DIV #3</span> <br />position: relative; <br />z-index: 2; </div> <div id="absdiv2"> <br /><span class="bold">DIV #4</span> <br />position: absolute; <br />z-index: 1; </div> <div id="normdiv"> <br /><span class="bold">DIV #5</span> <br />no positioning <br />z-index: 8; </div> </body> </html> View Code

图片 15

 试一下很容易发现我们的子级,z-index的值达到了1000的被设定了position:absolut;子级都被档在了父级的下面。我想了很久,我觉得其根本问题是:设置同样的position:relative/absolute;同级标签之间的等级是无法用z-index超越的。我们上面的例子中的第一个LI的等级永远都要小于后一个LI的等级,所以我们在LI里的子级身上设置了position:absolute;,给了非常高的z-index值。

2.2 提升层叠上下文中的层级

以上元素建立新层叠上下文的同时,也会提升元素自身所在层叠上下文中的层级。

我们以 opacity 为例。来看下 CSS3 规范中的话:

If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created.

如果元素 opacity 小于 1 且未定位,则必须在其父层叠上下文中,按其在定位了的、z-index: 0 且 opacity: 1 的情况中的层叠顺序绘制。如果 opacity 小于 1 且已定位,z-index 属性按 CSS2.1 应用,但 auto 要视为 0,因为新的层叠上下文总是创建了的。

如下案例:

CSS

div { width: 100px; height: 100px; } #box1 { position: absolute; background: red; top: 40px; left: 40px; } #box2 { background: blue; } <body> <div id="box1"></div> <div id="box2"></div> <body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div {
    width: 100px;
    height: 100px;
}
#box1 {
    position: absolute;
    background: red;
    top: 40px;
    left: 40px;
}
#box2 {
    background: blue;
}
 
<body>
    <div id="box1"></div>
    <div id="box2"></div>
<body>

以上 CSS 和 HTML 片段中,由于 box1 是绝对定位(层级为“Z-index: 0”级),而 box2 是文档流内块级盒(层级为“块级盒”级),因此 box1 会层叠在 box2 之上。下面添加如下 CSS 规则:

CSS

#box2 { opacity: .5; }

1
2
3
#box2 {
    opacity: .5;
}

这时候, box2 则会层叠在 box1 之上了。因为 box2 的 opacity 为 0.5(小于 1),故视其为“Z-index: 0”级,也就和 box1 同级了。同级情况下,按照二者在源代码中的顺序,居后的 box2 又重新占领高地了。

读者可以取下面规则之任意一条实验,都能达到同样效果:

CSS

#box2 { transform: scale(1); mix-blend-mode: difference; isolation: isolate; -webkit-filter: blur(5px); }

1
2
3
4
5
6
#box2 {
    transform: scale(1);
    mix-blend-mode: difference;
    isolation: isolate;
    -webkit-filter: blur(5px);
}

五、stacking context

为什么上个例子中元素的堆叠顺序受z-index的影响呢?因为这些元素有些特殊的属性触发它们生存堆叠上下文(stacking context)。

问题来了,什么样的元素会生成堆叠上下文呢?符合下面规则之一的:

  • 根元素(即HTML元素)
  • 已定位元素(即绝对定位或相对定位)并且z-index不是默认的auto。
  • a flex item with a z-index value other than "auto",
  • 元素opacity属性不为1(See the specification for opacity)
  • 元素transform不为none
  • 元素min-blend-mode不为normal
  • 元素filter属性不为none
  • 元素isolation属性为isolate
  • on mobile WebKit and Chrome 22 , position: fixed always creates a new stacking context, even when z-index is "auto" (See this post)
  • specifing any attribute above in will-change even you don't write themselves directly (See this post)
  • elements with -webkit-overflow-scrolling set to "touch"

在堆叠上下文(stacking context)中 ,子元素的堆叠顺序还是按照上述规则。重点是,子元素的z-index值只在父元素范围内有效。子堆叠上下文被看做是父堆叠上下文中一个独立的模块,相邻的堆叠上下文完全没关系。

总结几句:

渲染的时候,先确定小的stacking context中的顺序,一个小的stacking context确定了以后再将其放在父stacking context中堆叠。有种由内而外,由小及大的感觉。

举例:HTML结果如下,最外层是HTML元素,包含#1 #2 #3,#3中又包含着#4,#5,#6。

Root(HTML)

  • DIV #1
  • DIV #2
  • DIV #3
    • DIV #4
    • DIV #5
    • DIV #6

图片 16<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "; <html xmlns="" xml:lang="en"> <head> <title>Understanding CSS z-index: The Stacking Context: Example Source</title> <style type="text/css"> * { margin: 0; } html { padding: 20px; font: 12px/20px Arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px solid #696; padding: 10px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 180px; width: 330px; border: 1px solid #900; background-color: #fdd; padding: 40px 20px 20px; } #div4, #div5 { border: 1px solid #996; background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15px; padding: 25px 10px 5px; } #div5 { z-index: 1; margin-top: 15px; padding: 5px 10px; } #div6 { z-index: 3; position: absolute; top: 20px; left: 180px; width: 150px; height: 125px; border: 1px solid #009; padding-top: 125px; background-color: #ddf; text-align: center; } </style> </head> <body> <div id="div1"> <h1>Division Element #1</h1> <code>position: relative;<br/> z-index: 5;</code> </div> <div id="div2"> <h1>Division Element #2</h1> <code>position: relative;<br/> z-index: 2;</code> </div> <div id="div3"> <div id="div4"> <h1>Division Element #4</h1> <code>position: relative;<br/> z-index: 6;</code> </div> <h1>Division Element #3</h1> <code>position: absolute;<br/> z-index: 4;</code> <div id="div5"> <h1>Division Element #5</h1> <code>position: relative;<br/> z-index: 1;</code> </div> <div id="div6"> <h1>Division Element #6</h1> <code>position: absolute;<br/> z-index: 3;</code> </div> </div> </body> </html> View Code

效果:

图片 17 

 分析一下:

1、因为设置了div {opacity: 0.7; position: relative;},所以#1~#6的z-index都是有效的。

2、为什么#4的z-index比#1高,但是却在#1下面?因为#4的z-index虽然值大,但它的作用域在包含块#3内,而#1的z-index的作用域在html内,和#3同属html,而#3的z-index小于#1。

3、为什么#2的z-index值比#5的大,还在下面?同上。

4、#3的z-index是4,但该值和#4,#5,#6的z-index不具有可比性,它们不在一个上下文环境。

5、如何轻易的判断两个元素的堆叠顺序?

z-index对堆叠顺序的控制类似于排版时候一大章下几个小节的样子,或者版本号中一个大的版本号跟着小版本号。

Root-z-index值为默认auto,即0

  • DIV #2 - z-index 值为2
  • DIV #3 - z-index 值为4
    • DIV #5 - z-index值为 1,其父元素z-index值 4,所以最终值为4.1
    • DIV #6 - z-index值为 3,其父元素z-index值 4,所以最终值为4.3
    • DIV #4 - z-index值为 6,其父元素z-index值 4,所以最终值为4.6
  • DIV #1 - z-index 值为5

想看更多例子,可参考文章最后的资源链接。

也许你会这样来想:只要针对有span的LI设置position:relative;不就好了吗?非常正确。当其它的LI都不设置position:relative;那么我们需要的那个子级就可以浮在所有的内容之上。但是如果实际上,所有的LI中都要有span,并且属性都需要一样怎么办?当然我们不大会需要有这样的效果。但是我们需要有这样的效果:子级全部是隐藏的,当有鼠标反应时出现并且浮在所有的内容之上。我们要知道,这确实是件让人头疼的事,因为我们上面见识到了,子级在显示的时候都被压在了下一个父级标签的下面。下面我们来实现一下这个鼠标反应的定位效果:

2.3 transform 改变绝对定位子元素包含块

transform 除了建立新的局部层叠上下文外,还会干一件事:改变绝对定位子元素的包含块。须注意的是,固定定位也是绝对定位的一种。

什么是包含块?有时候一些盒子根据矩形盒计算自身定位和大小,此矩形盒即包含块。更多详情请阅读视觉格式化模型详述。

固定定位元素

固定定位元素的包含块由视口创建(如果读者了解视觉格式化模型详述的信息,也就知道这一点:在计算其“静态位置”的时候,则以初始化包含块作为其计算包含块)。现在我们看以下源代码:

CSS

div { width: 100px; height: 100px; } #fixed { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: blue; } #transform { background: red; padding: 20px; } <body> <div id="transform"> <div id="fixed"></div> </div> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
div {
    width: 100px;
    height: 100px;
}
#fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: blue;
}
#transform {
    background: red;
    padding: 20px;
}
 
<body>
    <div id="transform">
        <div id="fixed"></div>
    </div>
</body>

这个时候,以视口为包含块进行定位和大小计算, fixed 将会铺满整个屏幕。

但现在,我们加上如下规则:

CSS

#transform { transform: scale(1); }

1
2
3
#transform {
    transform: scale(1);
}

此时,fixed 的包含块不再是视口,而是 transform 的内边距盒的边缘盒了。故此时 fixed 的宽高均为 140px。

绝对定位元素

我们举一个例子:

CSS

#relative { position: relative; width: 100px; height: 100px; background: green; } #absolute { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: blue; } #transform { background: red; width: 50px; height: 50px; } <div id="relative"> <div id="transform"> <div id="absolute"></div> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#relative {
    position: relative;
    width: 100px;
    height: 100px;
    background: green;
}
#absolute {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: blue;
}
#transform {
    background: red;
    width: 50px;
    height: 50px;
}
 
<div id="relative">
    <div id="transform">
        <div id="absolute"></div>
    </div>
</div>

此时 absolute 的包含块为 relative 的内边距盒的边缘盒。由此 absolute 的宽高均为 100px。然后我们添加如下规则:

CSS

#transform { transform: scale(1); }

1
2
3
#transform {
    transform: scale(1);
}

由于 transform 创建了局部层叠上下文,absolute 的包含块不再是 relative 而是 transform 了,根据这一新的包含块,得新宽和高为 50px。

1 赞 1 收藏 评论

图片 18

六、 合理使用z-index数值

如果现有三个堆叠的层,从上到下分别为:DIV3,DIV2,DIV1,设置时以100为间隔,设置DIV1的z-index为0,DIV2的z-index为100,设置DIV3的z-index为200。这样后期如果需要在DIV1和DIV2之间加入一些层的话,以10为间隔,设置z-index为10,20等。再需要向z-index0和z-index10之间加入一层的话以5为间隔。这样的写法可以方便后期扩展添加内容。

尽量避免给z-index使用负值。当然不是绝对的,比如在做图文替换的时候可以使用负值。

  1. <ul>
  2. <li><a href="" title=""><span>第一块</span></a></li>
  3. <li><a href="" title=""><span>第二块</span></a></li>
  4. <li><a href="" title=""><span>第三块</span></a></li>
  5. <li><a href="" title=""><span>第四块</span></a></li>
  6. <li><a href="" title=""><span>第五块</span></a></li>
  7. </ul>

七、资源链接

MDN z-index

understanding css z-index

w3c z-index

 

一、z-index z-index用来控制元素重叠时堆叠顺序。 适用于 :已经定位的元素(即position:relative/absolute/fixed)。 一...

我们通过链接的鼠标事件来完成这个显示隐藏效果:

  1. *{margin:0; padding:0; list-style:none;}
  2. li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
  3. li a {position:relative; z-index:1; display:block; height:100px; width:100px;  background:#000;}
  4. li a:hover {background:#000000;}
  5. li span {display:none;}
  6. li a:hover span {display:block; background:#c00; width:200px; height:200px; position:absolute; top:0; left:100px; z-index:1000;}

我们设定了a为position:relative;这样他的子级就会根据父级的左上角为坐标原点进行定位了。然后我们设定span的具体形状以及定位属性,然后把他隐藏了。我们再通过A的伪类:hover使得span被激活。我们看一下结果,我们会发现,所有应该在上面的现在全在下面了。那我们怎么解决这个难题呢,其实以CSS想强行突破是不太可能,所以我们反过来想,能不能让这个没有被触发的父级标签没有position:relative;属性,而只是触发的时候才有级这个父级赋上这样的值?其实想到这里基本上已经可以解决所有的问题了:

  1. *{margin:0; padding:0; list-style:none;}
  2. li {height:100px; margin:0 5px 0 0; float:left; width:100px;}
  3. li a {display:block; height:100px; width:100px;  background:#000;}
  4. li a:hover {position:relative; z-index:1; }
  5. li span {display:none;}
  6. li a:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }

我们只要针对a:hover来设定其属性为position:relative;就可以了,这样只有在鼠标触发的时候A才会被赋于一个相对定位的属性。这样就完成可以解决被其它父级标签所挡的尴尬了。

当然如果不介意IE5这样的浏览器我们还可以把代码再做简化:

  1. <ul>
  2. <li><span>第一块</span></li>
  3. <li><span>第二块</span></li>
  4. <li><span>第三块</span></li>
  5. <li><span>第四块</span></li>
  6. <li><span>第五块</span></li>
  7. </ul>

CSS可以改成这样:

  1. *{margin:0; padding:0; list-style:none;}
  2. li {height:100px; margin:0 5px 0 0; float:left; width:100px; background:#000;}
  3. li:hover {position:relative; z-index:1;}
  4. li span {display:none;}
  5. li:hover span {display:block; width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000; }

补充:

上文讲了定位中的等级,这几天再看的时候发现文中讲得并不透彻,没有直指关键。所以特别的在这里做出补充希望能把position中的等级讲得更为清楚、明确一些。

我们都知道,position有四个不同的值,分别为:static | absolute | fixed | relative。在苏昱的《CSS2中文手册》中是这样解释的:static:无特殊定位,对象遵循HTML定位规则; absolute:将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框; relative:对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置; fixed:IE5.5及NS6尚不支持此属性。

但是要想改变对象的层叠位置需要的是另一个CSS属性:z-index。但是这个z-index并非是无所不能的,他受到了HTML代码等级的制约。z-index只能在同等级的HTML上体现他的作用。这里需要声明的是z-index只有在对象的position值为relative/absolute时才可以使用。下面我们就举些例子来解释等级的特性:

  1. <div id="box_1">
  2.   <div id="a">这是第一个块</div>
  3.   <div id="b">这是第二个块</div>
  4. </div>

针对上面的这个HTML代码我们还需要写一段CSS来定义它:

  1. #a,#b {position:absolute; width:300px; height:100px;  }
  2. #a {z-index:10; left:0; top:0;  background:#000; }
  3. #b {z-index:1; left:20px; top:20px; background:#c00; }

这是最普通的在这种情况下#a与#b的层叠等级是可以通过z-index来设定的。这是没问的,那么什么样的情况下就会出现问题呢?我们再看一个实例:

  1. <div id="box_1">
  2.   <div id="a">这是第一个块</div>
  3. </div>
  4. <div id="box_2">
  5.   <div id="b">这是第二个块</div>
  6. </div>

根据这个结构再写一个CSS,要注意这个CSS中的不同的地方:

  1. #box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
  2. #a, #b {position:absolute; width:100px; height:300px; }
  3. #a {background:#c00;  z-index:100; }
  4. #b {background:#0c0;  z-index:1; left:50px;}

这时候我们看,不论#a设为多大的值,他都无法超过#b,所以说z-index是无法冲破HTML的等级的,他必需是要同等级的状态下才可以发挥威力.那么如何解决这个问题呢?我可以反过来想,堂兄弟之间的顺序不能被重组,何不把父辈的等级做一次重组呢?所以我们把#box_1的CSS中加入一个z-index:100; 在#box_2的CSS中加入z-index:1;这样再看一下效果:

  1. #box_1, #box_2 {position:relative; width:300px; height:100px; margin:10px; background:#ddd;}
  2. #box_1 {z-index:100;}
  3. #box_2 {z-index:1;}
  4. #a, #b {position:absolute; width:100px; height:300px; }
  5. #a {background:#c00; }
  6. #b {background:#0c0; left:50px;}

这是指定父级重组了层叠的顺序,如果要是没有办法一一指定父级的顺序重组,那就要看看本文前面部分,但是也不是什么问题都能解决,但是看看也许能帮你想到更好的办法!

 

本文出自: 和

 

 

本文由星彩网app下载发布于前端技术,转载请注明出处:index堆叠规则,absolute无法冲破的等级

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。