层叠上下文,却能牵扯出这么大的学识

深切了然CSS中的层叠上下文和层叠顺序

2016/01/10 · CSS ·
层叠上下文

初稿出处:
张鑫旭   

零、世间的道理都是想通的

在那个世界上,凡事都有个先后顺序,凡物都有个论资排辈。比方说食堂排队打饭,对啊,讲求先到先得,总不容许一拥而上。再例如说话语权,爱妻的话永远是对的,领导的话永远是对的。

在CSS届,也是这么。只是,一般情况下,大家平平静静,看不出什么差别,即所谓的众一生等。然则,当暴发争辨发生纠纷的时候,显著,是不能够完毕一心相同的,先后顺序,身份差别就显现出来了。例如,杰克和罗斯,只能够一人浮在木板上,此时,出现了冲突,结果我们都领会的。那对于CSS世界中的元素而言,所谓的“争执”指什么吧,其中,很首要的一个范畴就是“层叠显示争辩”。

默许境况下,网页内容是尚未偏移角的垂直视觉显示,当内容暴发层叠的时候,一定会有一个光景的层叠顺序发生,有点类似于实际世界中论资排辈的感到。

而要了然网页中元素是怎么“论资排辈”的,就需求深切了然CSS中的层叠上下文和层叠顺序。

咱俩大家兴许都通晓CSS中的z-index性能,要求跟大家讲的是,z-index实际上只是CSS层叠上下文和层叠顺序中的一叶小舟。

深入理解CSS中的层叠上下文和层叠顺序

无足挂齿的 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一起行使感兴趣的可以亲身说美赞臣(Meadjohnson)(Nutrilon)(Aptamil)下,那里只引玉之砖。

层叠顺序对相对元素的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伴随着层的定义爆发的。网页中,层的定义与photoshop或是flash中层的概念是一样的。熟知photoshop或是flash的应该通晓,层级越高(图层越靠上),越在地点突显,如若层暴发重叠,层级高的会覆盖层级低的,要是非透明或半晶莹剔透,则会遮掩。

一、什么是层叠上下文

层叠上下文,英文名叫”stacking context”.
是HTML中的一个三维的概念。如若一个要素含有层叠上下文,大家得以领略为那几个元素在z轴上就“高人一头”。

这里出现了一个名词-z轴,指的是什么样啊?

代表的是用户与显示屏的那条看不见的垂直线(参见下图表示-红线):
亚洲必赢官网 8

层叠上下文是一个概念,跟「块状格式化上下文(BFC)」类似。不过,概念那一个东西是相比较虚相比较空虚的,要想轻松领会,大家须要将其具象化。

怎么个实际化法呢?

你可以把「层叠上下文」了然为当官:网页中有过多过多的要素,大家可以作为是忠实世界的大千世界。真实世界里,大家大多数人是普通老百姓们,还有一对人是从政的决策者。OK,那里的“官员”就可以通晓为网页中的层叠上下文元素。

换句话说,页面中的元素有了层叠上下文,就好比大家一般老百姓当了官,一旦当了官,相比较普通老百姓而言,离国君更近了,对不对,就一律网页中元素级别更高,离我们用户更近了。

亚洲必赢官网 9

概念

层叠上下文,英文名叫”stacking context”.
是HTML中的一个三维的概念。层叠水平和CSS的z-index属性无法歪曲,某些景况下z-index确实可以影响层叠水平。然则,只限于定位元素以及flex盒子的男女元素;而层叠水平有所的因素都存在。

在photoshop中

层的音量就是靠手动调的,鼠标拖拽,或是ctrl+]或是ctrl+shift+[飞速键改变层的次第。如下图,鼠标拖移改变层次序的长河中:
亚洲必赢官网 10

二、什么是层叠水平

再来说说层叠水平。“层叠水平”英文名叫”stacking
level”,决定了同一个层叠上下文中元素在z轴上的显得顺序。level那个词很简单让大家联想到大家真正世界中的三六九等、论资排辈。真实世界中,每个人都是独自的民用,包罗同卵双胞胎,有反差就有分别。例如,双胞胎即便长得像Ctrl+C/Ctrl+V得到的,但骨子里,出生时间如故有先后顺序的,先落地的尤其就大,三哥或大姨子。网页中的元素也是这么,页面中的每个元素都是单独的村办,他们一定是会有一个好像的排行排序的情形存在。而那些名次排序、论资排辈就是大家那边所说的“层叠水平”。层叠上下文元素的层叠水平足以领会为官员的职级,1品2品,市长参谋长之类;对于普通元素,那一个嘛……你协调随便驾驭。

于是,同理可得,所有的因素都有层叠水平,包涵层叠上下文元素,层叠上下文元素的层叠水平足以知晓为领导者的职级,1品2品,省长部长之类。然后,对于普通元素的层叠水平,我们的商量仅仅局限在时下层叠上下文元素中。为何吧?因为否则没有意思。

那般清楚呢~
上面提过元素具有层叠上下文好比当官,大家都知情的,那当官的家里都有丫鬟啊保镖啊管家啊什么的。所谓打狗看主人,A官员家里的管家和B官员家里的管家做PK实际上是从未有过意义的,因为他们牛不牛逼完全由她们的主人翁决定的。一人得道一人飞升,你说这和致斋家里的管家和七侠镇娄知县令尹家里的管家有可比性吗?李总理的书记是或不是分分钟灭了你村支部书记的秘书(即使有)。

翻译成术语就是:普通元素的层叠水平优先由层叠上下文决定,由此,层叠水平的可比只有在如今层叠上下文元素中才有意义。

亚洲必赢官网 11

急需留意的是,诸位千万不要把层叠水平和CSS的z-index属性混为一谈。没错,某些境况下z-index确实可以影响层叠水平,不过,只限于定位元素以及flex盒子的儿女元素;而层叠水平有所的元素都设有。

在默许景况下(是在css3此前)

inline-block盒子>float盒子>block盒子=(z-index:auto)>负z-index
上述可以领略为,装饰属性在最下,布局属性在上,内容属性在最下边。

在flash中

层叠上下文,却能牵扯出这么大的学识。类似,可以手动改变图层次序,或是使用as脚本,例如:容器对象.setChildIndex(彰显对象,0)就是让对象底层突显,而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最下边突显。

三、什么是层叠顺序

再来说说层叠顺序。“层叠顺序”英文名叫”stacking order”.
表示元素暴发层叠时候拥有一定的垂直显示顺序,注意,这里跟上面七个不等同,上面的层叠上下文和层叠水平是概念,而那边的层叠顺序是规则

在CSS2.1的年份,在CSS3还并未出现的时候(注意那里的前提),层叠顺序规则坚守下边那张图:
亚洲必赢官网 12

有人可能有见过类似图,那么些图是不少浩大年前老外绘制的,英文内容。而是更首要的是境内估摸没有同行举办过注解与履行,实际上很多非同儿戏音讯缺失。上边是自个儿要好手动重绘的中文版同时补充很多任哪个地点方相对没有的第一文化音讯。假如想要无水印高清大图,点击那里采购(0.5元)。

缺失的根本音信包蕴:

  1. 座落最低水平的border/background指的是层叠上下文元素的边框和背景观。每一个层叠顺序规则适用于一个全部的层叠上下文元素。
  2. 原图没有显现inline-block的层叠顺序,实际上,inline-block和inline水平元素是一模一样level级别。
  3. z-index:0实际上和z-index:auto单纯从层叠水平上看,是足以当作是同样的。注意那里的措辞——“单纯从层叠水平上看”,实际上,两者在层叠上下文领域拥有根本性的不相同。

上面我要向大家发问了,大家有没有想过,为什么内联元素的层叠顺序要比变化元素和块状元素都高?
亚洲必赢官网 13

干什么呢?我明明感觉浮动元素和块探花素要更屌一点啊。

嘿嘿嘿,我就不卖关子了,直接看下图的标注表达:
亚洲必赢官网 14

诸如border/background诚如为点缀属性,而变化和块状元素一般作为布局,而内联元素都是内容。网页中最要害的是什么?当然是内容了哈,对不对!

故而,一定要让内容的层叠顺序卓越高,当发生层叠是很好,首要的文字啊图片内容可以事先揭破在显示屏上。例如,文字和生成图片重叠的时候:

亚洲必赢官网 15

地点说的那么些层叠顺序规则依然老时代的,纵然把CSS3也牵扯进来,科科,事情就差距了。

display:flex|inline-flex与层叠上下文

<pre><div class=”box”>
<div>
<img src=”mm1.jpg”>
</div>
</div></pre>

<pre>
.box { }
.box > div {
background-color: blue; z-index: 1;
} /* 此时该div是普通元素,z-index无效 /
.box > div > img {
position: relative; z-index: -1; right: -150px;
} /
注意那里是负值z-index */
</pre>
此处只看Img的负z-index,所以在默许盒子下边

<pre><div class=”box”>
<div>
<img src=”mm1.jpg”>
</div>
</div></pre>

<pre>
.box { display:flex }
.box > div {
background-color: blue; z-index: 1;
} /* 此时该div是层叠上下文,z-index为1 /
.box > div > img {
position: relative; z-index: -1; right: -150px;
} /
注意那里是负值z-index */
</pre>
那边都是层叠了,父级div成了层叠背景。

在CSS中

Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上(与X轴Y轴绝对照)的职分而言。一个更高的Z-
index值意味着这么些因素在叠层顺序中会更靠近顶部。那么些层叠顺序沿着垂直的线轴被突显。分明,只好通过代码改变层级,这一个特性就是z-index,要
让z-index起效用有个细微前提,就是因素的position属性如果relative,absolute或是fixed。下为z-index的表示
图:
亚洲必赢官网 16
依照常规的思考,z-index层级越高,内容越应该在上头呈现。在一大半的浏览器在半数以上的情事下,确实如此,可是不相对。更加遭遇IE6,这厮,推测是后妈带大的,从小营养不良,结果后来如常难点一堆又一堆。z-index的题材就是内部之一,而本文就是要讲讲这几个IE6下z-index不起效率的问题。

四、务必牢记的层叠准则

下边那多少个是层叠领域的纯金守则。当元素爆发层叠的时候,其遮住关系遵从上面2个准则:

  1. 什么人大何人上:当有着分明的层叠水平标示的时候,如识其余z-indx值,在同一个层叠上下文领域,层叠水平值大的这么些遮盖小的那些。通俗讲就是官大的压死官小的。
  2. 青出于蓝:当元素的层叠水平同样、层叠顺序相同的时候,在DOM流中处于末端的要素会覆盖前边的元素。

在CSS和HTML领域,只要元素暴发了重叠,都离不开上面那四个黄金守则。因为背后会有多少个实例证实,那里就到此结束。

opacity与层叠上下文

当opacity小于1时,就变成层叠上下文。遵守上边规则,父级div成了层叠背景

二、关于效果截图的些须求表明

1、页面上平素不动的一个灰色背景,透明度40%,大概满屏显示的层级为1的相对定位层。
HTML为:<div id=”blank”></div>
对应CSS为:#blank{width:100%; height:600px; background:black;
opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0;
z-index:1;}
功效是为了让层级关系一目明白。看:
亚洲必赢官网 17
那注明内容在z-index为1的相对定位层之下。
亚洲必赢官网 18
那表达内容在z-index为1的相对定位层之上。
2、页面上做比较的是漂亮的女子图片,图片在半透明灰色相对定位层的方面依然下边很简单辨认,那样,您就可以对本人所说的z-index不起功能有很直观的认识了。

五、层叠上下文的风味

层叠上下文元素有如下特点:

  • 层叠上下文的层叠水平要比一般元素高(原因后边会表达);
  • 层叠上下文能够阻断元素的插花格局(见此文第二部分讲明);
  • 层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
  • 每个层叠上下文和兄弟元素独立,也就是当举行层叠变化或渲染的时候,只需求考虑后代元素。
  • 各种层叠上下文是自成连串的,当元素暴发层叠的时候,整个因素被认为是在父层叠上下文的层叠顺序中。

翻译成真实世界语言就是:

  • 当官的比普通人更有机会合见圣上;
  • 首长下去考察,会被本地领导阻隔只见到繁荣看不到真实民情;
  • 一个家里,岳丈可以当官,孩子也是可以而且当官的。然则,孩子这一个官要受二叔决定。
  • 和谐当官,兄弟不占光。有怎么样便宜照旧变化只会潜移默化自己的孩子们。
  • 每个当官的都有属于自己的小团体,当家眷管家发生摩擦冲撞的时候(包含和其他官员的家眷管家),都是要先期看当官的也就是主人的面色。
** transform与层叠上下文**

添加transform,也会变成层叠上下文

三、IE6的抱怨:浮动让我陷入

率先讲讲第一种z-index无论设置多高都不起成效意况。
那种情景发生的基准有多个:
1、父标签 position属性为relative;
2、难题标签无position属性(不包涵static);
3、难题标签包涵浮动(float)属性。
你能够拿上边的代码自己做个简单测试:
<div id=”blank”></div>
<div style=”position:relative; z-index:9999;”>
<img style=”float:left;” src=”
/>
</div>
z-index都9999了,层级够高吧,然而,看上面的图:
亚洲必赢官网 19
亚洲必赢官网 20
今天去掉浮动,HTML代码如下:
<div id=”blank”></div>
<div style=”position:relative; z-index:9999;”>
<img src=”
/>
</div>
结果IE6下:
亚洲必赢官网 21
将表面div的position:relative属性改为 absolute可以化解这一标题
解决方法有三,1、position:relative改为position:absolute;2、去除浮动;3、浮动元素添加position属性(如relative,absolute等)。

六、层叠上下文的创制

卖了那样多文字,到底层叠上下文是个什么鬼,倒是拿出去瞅瞅啊!

嘿嘿。就像块状格式化上下文,层叠上下文也差不离是有一对特定的CSS属性创立的。我将其计算为3个门户,也就是从政的3种途径:

  1. 皇亲国戚派:页面根元素天生具备层叠上下文,称之为“根层叠上下文”。
  2. 科考入选派:z-index值为数值的定势元素的思想意识层叠上下文。
  3. 其余当官途径:其他CSS3属性。

//zxx:
上面很多例子是实时CSS效果,提出您去原地方浏览,以便预览更规范的功用。

①. 根层叠上下文

指的是页面根元素,也就是滚动条的默许的始作俑者<html>`元素。这就是为什么,绝对定位元素在left/top`等值定位的时候,倘诺没有此外定位元素限制,会相对浏览器窗口定位的因由。

②. 定位元素与传统层叠上下文

对此富含有position:relative/position:absolute的一向元素,以及Fire福克斯/IE浏览器(不包涵Chrome等webkit内核浏览器)(近年来,也就是2016新春是那样)下富含position:fixed扬言的定势元素,当其z-index值不是auto的时候,会创立层叠上下文。

知道了那或多或少,有些场景就好领会了。

如下HTML代码:

<div style=”position:relative; z-index:auto;”> <img
src=”mm1.jpg” style=”position:absolute; z-index:2;”> <– 横妹子
–> </div> <div style=”position:relative; z-index:auto;”>
<img src=”mm2.jpg” style=”position:relative; z-index:1;”> <–
竖妹子 –> </div>

1
2
3
4
5
6
<div style="position:relative; z-index:auto;">
    <img src="mm1.jpg" style="position:absolute; z-index:2;">    <– 横妹子 –>
</div>
<div style="position:relative; z-index:auto;">
    <img src="mm2.jpg" style="position:relative; z-index:1;">    <– 竖妹子 –>
</div>

亚洲必赢官网 22

世家会发觉,竖着的胞妹(mm2)被横着的胞妹(mm1)给覆盖了。

上边,大家对父级简单调整下,把z-index:auto改成层叠水平一样的z-index:0,
代码如下:

<div style=”position:relative; z-index:0;”> <img src=”mm1.jpg”
style=”position:absolute; z-index:2;”> <– 横妹子 –>
</div> <div style=”position:relative; z-index:0;”> <img
src=”mm2.jpg” style=”position:relative; z-index:1;”> <– 竖妹子
–> </div>

1
2
3
4
5
6
<div style="position:relative; z-index:0;">
    <img src="mm1.jpg" style="position:absolute; z-index:2;">    <– 横妹子 –>
</div>
<div style="position:relative; z-index:0;">
    <img src="mm2.jpg" style="position:relative; z-index:1;">    <– 竖妹子 –>
</div>

亚洲必赢官网 23

大家会意识,尼玛反过来了,竖着的妹子(mm2)那回趴在了横着的胞妹(mm1)身上。

亚洲必赢官网 24

何以小小的改变会有想法的结果吗?
亚洲必赢官网 25

分裂就在于,z-index:0所在的<div>要素是层叠上下文元素,而z-index:auto所在的<div>要素是一个一般的要素,于是,里面的三个<img>妹子的层叠比较就不受父级的震慑,两者直接套用层叠黄金守则,那里,两者兼有明确例外的z-index值,因此,遵循“什么人大何人上”的准则,于是,z-index2的丰盛横妹子,就趴在了z-index1的竖妹子身上。

z-index一经变成数值,哪怕是0,都会成立一个层叠上下文。此时,层叠规则就暴发了转变。层叠上下文的特性里面最终一条——自成连串。七个<img>堂妹的层叠顺序相比变成了事先相比较其父级层叠上下文元素的层叠顺序。那里,由于双方都是z-index:0,层叠顺序这一块两者如出一辙大,此时,遵循层叠黄金守则的其余一个准则“后起之秀超越前辈”,根据在DOM流中的岗位决定哪个人在地方,于是,位于前面的竖着的胞妹就听天由命趴在了横着的阿妹身上。对,没错,<img>要素上的z-index打酱油了!

奇迹,大家在网页重构的时候,会发现,z-index嵌套错乱,看看是还是不是受父级的层叠上下文元素苦恼了。然后,可能没多大意思了,但自己仍然提一下,算是祭拜下,IE6/IE7浏览器有个bug,就是z-index:auto的固定元素也会创设层叠上下文。那就是干什么在过去,IE6/IE7的z-index会搞死人的原由。

接下来,我再提一下position:fixed,
在过去,position:fixedrelative/absolute在层叠上下文这一块是一丘之貉,都是急需z-index为数值才行。可是,不知晓哪些时候起,Chrome等webkit内核浏览器,position:fixed要素天然层叠上下文元素,无需z-index为数值。依据自己的测试,如今,IE以及FireFox仍是老套路。

③. CSS3与新时代的层叠上下文
CSS3的面世除了带来了新属性,同时还对过去的无数规则发出了挑战。例如,CSS3 transform对overflow隐藏对position:fixed定位的影响等。而那边,层叠上下文这一块的影响要尤其广阔与明确。

如下:

  1. z-index值不为autoflex项(父元素display:flex|inline-flex).
  2. 元素的opacity值不是1.
  3. 元素的transform值不是none.
  4. 元素mix-blend-mode值不是normal.
  5. 元素的filter值不是none.
  6. 元素的isolation值是isolate.
  7. will-change指定的属性值为地方任意一个。
  8. 元素的-webkit-overflow-scrolling设为touch.

大抵每一项都有过多槽点。

1. display:flex|inline-flex与层叠上下文
只顾,那里的条条框框有点负责。要满意多个规格才能形成层叠上下文:条件1是父级需若是display:flex或者display:inline-flex水平,条件2是子元素的z-index不是auto,必须是数值。此时,那些子元素为层叠上下文元素,没错,注意了,是子元素,不是flex父级元素。

眼见为实,给我们上例子吗。

如下HTML和CSS代码:

<div class=”box”> <div> <img src=”mm1.jpg”>
</div> </div>

1
2
3
4
5
<div class="box">
    <div>
     <img src="mm1.jpg">
    </div>
</div>

.box { } .box > div { background-color: blue; z-index: 1; } /*
此时该div是一般元素,z-index无效 */ .box > div > img { position:
relative; z-index: -1; right: -150px; /* 注意那里是负值z-index */ }

1
2
3
4
5
.box {  }
.box > div { background-color: blue; z-index: 1; }    /* 此时该div是普通元素,z-index无效 */
.box > div > img {
  position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */
}

结果如下:

亚洲必赢官网 26

会发现,妹子跑到黑色背景的底下了。为啥吧?层叠顺序图可以找到答案,如下:
亚洲必赢官网 27

从上图可以见到负值z-index的层叠顺序在block水平元素的上面,而灰色背景div要素是个常备元素,由此,妹子直接通过过去,在黑色背景前面的显得了。

现在,我们CSS微调下,增加display:flex, 如下:

.box { display: flex; } .box > div { background-color: blue; z-index:
1; } /* 此时该div是层叠上下文元素,同时z-index生效 */ .box > div
> img { position: relative; z-index: -1; right: -150px; /*
注意那里是负值z-index */ }

1
2
3
4
5
.box { display: flex; }
.box > div { background-color: blue; z-index: 1; }    /* 此时该div是层叠上下文元素,同时z-index生效 */
.box > div > img {
  position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */
}

结果:

亚洲必赢官网 28

会发觉,妹子在紫色背景下边展现了,为何吧?层叠顺序图可以找到答案,如下:
亚洲必赢官网 29
从上图可以看看负值z-index的层叠顺序在当下先是个父层叠上下文元素的地点,而那时,那些z-index值为1的紫色背景“ 

的父元素的display值是flex,一下子升官发财变成层叠上下文元素了,于是,图片在红色背景下面显示了。那个境况也证实了层叠上下文元素是flex子元素,而不是flex容器元素。

其它,此外,这几个事例也颠覆了俺们传统的对z-index的理解。在CSS2.1时代,z-index品质必须和稳定元素一起使用才有功效,可是,在CSS3的社会风气里,非定点元素也能和z-index欢悦地搞基。

2. opacity与层叠上下文

咱俩一贯看代码,原理和地点例子一样,就不解释了。

如下HTML和CSS代码:

<div class=”box”> <img src=”mm1.jpg”> </div>

1
2
3
<div class="box">
    <img src="mm1.jpg">
</div>

.box { background-color: blue; } .box > img { position: relative;
z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue;  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

亚洲必赢官网 30

下一场价格透明度,例如50%晶莹剔透:

.box { background-color: blue; opacity: 0.5; } .box > img { position:
relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; opacity: 0.5;  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

亚洲必赢官网 31

原因就是半晶莹剔透元素具有层叠上下文,妹子图片的z-index:-1没辙穿透,于是,在褐色背景上边乖乖呈现了。

3. transform与层叠上下文

应用了transform变换的因素同样颇具菜单上下文。

俺们直接看使用后的结果,如下CSS代码:

.box { background-color: blue; transform: rotate(15deg); } .box > img
{ position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; transform: rotate(15deg);  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

亚洲必赢官网 32

4. mix-blend-mode与层叠上下文
mix-blend-mode类似于PS中的混合形式,从前越发有成文介绍-“CSS3混合形式mix-blend-mode简介”。

要素和反动背景混合。无论哪一种情势,要么全白,要么没有其余变动。为了让大家有直观感受,因此,下边例子我特意加了个原创平铺背景:

.box { background-color: blue; mix-blend-mode: darken; } .box > img {
position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; mix-blend-mode: darken;  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

亚洲必赢官网 33

亟需小心的是,近日,IE浏览器(包涵IE14)还不襄助mix-blend-mode,由此,要想看看妹子在背景观之上,请使用Chrome或FireFox。

无异于的,因为粉红色背景元素升级成了层叠上下文,由此,z-index:-1不知所可穿透,在红色背景上显得了。

5. filter与层叠上下文

那里说的filter是CSS3中正式的滤镜,不是旧IE时代私有的那多少个,就算目标类似。同样的,我事先有提过,例如图形的灰度或者图表的毛玻璃效果等。

俺们运用大规模的模糊效果示意下:

.box { background-color: blue; filter: blur(5px); } .box > img {
position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; filter: blur(5px);  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

亚洲必赢官网 34

好啊,果然被您猜对了,妹子黄色床上躺着,只是你眼镜摘了,看得有点不够真诚罢了。

6. isolation:isolate与层叠上下文
isolation:isolate那个宣称是mix-blend-mode出现的。默认情状下,mix-blend-mode会掺杂z轴所有层叠在底下的要素,若是大家不期望某个层叠的因素加入混合如何做吧?就是使用isolation:isolate。由于一言难尽,我更加为此写了篇小说:“驾驭CSS3
isolation:
isolate的显示和效用”,解释了其阻隔混合方式的法则,提议大家看下。

要以身作则这几个效果,我索要重新规划下,如下HTML结构:

<img src=”img/mm2.jpg” class=”mode”> <div class=”box”>
<img src=”mm1.jpg”> </div>

1
2
3
4
<img src="img/mm2.jpg" class="mode">
<div class="box">
    <img src="mm1.jpg">
</div>

CSS首要代码如下:

.mode { /* 竖妹子绝对定位,同时混合形式 */ position: absolute;
mix-blend-mode: darken; } .box { background: blue; } .box > img {
position: relative; z-index: -1; }

1
2
3
4
5
6
7
8
9
10
.mode {
  /* 竖妹子绝对定位,同时混合模式 */
  position: absolute; mix-blend-mode: darken;
}    
.box {
  background: blue;        
}
.box > img {
  position: relative; z-index: -1;
}

社团如下:

亚洲必赢官网 35

会发觉,横妹子被混合形式了。此时,大家给大嫂所在容器增添isolation:isolate,如下CSS所示:

.mode { /* 竖妹子相对定位,同时混合情势 */ position: absolute;
mix-blend-mode: darken; } .box { background: blue; isolation:isolate; }
.box > img { position: relative; z-index: -1; }

1
2
3
4
5
6
7
8
9
10
.mode {
  /* 竖妹子绝对定位,同时混合模式 */
  position: absolute; mix-blend-mode: darken;
}    
.box {
  background: blue; isolation:isolate;        
}
.box > img {
  position: relative; z-index: -1;
}

结果为:

亚洲必赢官网 36

会发现横着的胞妹跑到灰色背景上面了。那标志确实成立了层叠上下文。
7. will-change与层叠上下文

关于will-change,如果有同学还不精晓,可以瞻仰我事先写的稿子:“使用CSS3
will-change提升页面滚动、动画等渲染性能”。

都是相仿的演示代码:

.box { background-color: blue; will-change: transform; } .box > img {
position: relative; z-index: -1; right: -150px; }

1
2
3
4
.box { background-color: blue; will-change: transform;  }
.box > img {
  position: relative; z-index: -1; right: -150px;
}

结果如下:

亚洲必赢官网 37

果不其然意料之中,妹子上了红色的背景。

总结:
  1. 第一关心的是是还是不是是层叠元素,假如是层叠元素,就根据层叠规则(图)作比较。不是层叠元素的,就在图中默许景况。
  2. 在css3,以下会让要素变为层叠元素:
  • opacity小于1
  • 新的filter属性
  • transform
  • 父级元素为flex属性
  1. 比大小值,同级看顺序。

四、固执的IE6:它只认第二个三伯

用术语具体讲述为:
父标签position属性为relative或absolute时,子标签的absolute属性是对峙于父标签而言的。而在IE6下,层级的变现有时候不是看子标签的z-index多高,而要看它们的父标签的z-index什么人高何人低。
然而,相信这一个中很多个人不理解IE6下,决定层级高低的不是当下的父标签,而是所有DOM
tree(节点树)的率先个relative属性的父标签。有时日常大家多处理一个父标签,z-index层级多而复杂的意况不多见,所以难免会有认识上的小不点儿错误。

譬如下边的HTML代码:
<div id=”blank”></div>
<div style=”position:relative;”>
<div style=”position:relative;z-index:1000;”>
<div style=”position:absolute; z-index:9999;”>
<img src=”
/>
</div>
</div>
</div>
可以看出,mm3图形的父标签div
是纯属定位,层级9999,比1大多了,相对定位的父标签层级1000(10000也同等),也比黄色半透明层的z-index:1大多了,不过,大家充足的IE6童鞋——
亚洲必赢官网 38
亚洲必赢官网 39
IE7与IE6有着一样的bug,原因很简短,纵然图片所在div当前的老爸层级很高(1000),但是出于老爸的老爸不顶用,可怜了9999那样强势的孩子从未起色之日啊!
亚洲必赢官网 40
知晓原因解决就很轻松了,给第一任老爸添加z-index后的HTML代码如下:
<div id=”blank”></div>
<div style=”position:relative;z-index:1;“>
<div style=”position:relative; z-index:1000;”>
<div style=”position:absolute; z-index:9999;”>
<img src=”
/>
</div>
</div>
</div>
结果IE6童鞋快意,春光灿烂:
亚洲必赢官网 41

七、层叠上下文与层叠顺序

本文数十次事关,一旦普通元素具有了层叠上下文,其层叠顺序就会变高。那它的层叠顺序究竟在哪些地点吗?

此处须要分二种景况探究:

  1. 倘使层叠上下文元素不借助于z-index数值,则其层叠顺序是z-index:auto可看成z:index:0级别;
  2. 假定层叠上下文元素依赖z-index数值,则其层叠顺序由z-index值决定。

于是,大家地点提供的层叠顺序表,实际上照旧紧缺任何重点音信。我又花功夫重新绘制了一个更完整的7阶层叠顺序图(同样的版权所有,商业请购买,可得无水印大图):

亚洲必赢官网 42

大家通晓怎么一定元素会层叠在平时元素的地方吧?

其根本原因就在于,元素一旦变成一定元素,其z-index就会活动生效,此时其z-index就是默许的auto,也就是0级别,依照下面的层叠顺序表,就会覆盖inlineblockfloat元素。

而不帮忙z-index的层叠上下文元素天然z-index:auto级别,也就代表,层叠上下文元素和稳定元素是一个层叠顺序的,于是当他们发生层叠的时候,坚守的是“青出于蓝”准则。

咱俩得以速度测试下:

<img src=”mm1″ style=”position:relative”/> <img src=”mm2″
style=”transform:scale(1);”/>

1
2
<img src="mm1" style="position:relative"/>
<img src="mm2" style="transform:scale(1);"/>

<img src=”mm2″ style=”transform:scale(1);”/> <img src=”mm1″
style=”position:relative”/>

1
2
<img src="mm2" style="transform:scale(1);"/>
<img src="mm1" style="position:relative"/>

亚洲必赢官网 43

会发觉,两者样式一样,仅仅是在DOM流中的岗位不均等,导致她们的层叠表现不均等,后边的阿妹趴在了前方妹子的随身。那也表明了,层叠上下文元素的层叠顺序就是z-index:auto级别。

z-index值与层叠顺序

借使元素协助z-index值,则层叠顺序就要好通晓些了,相比较数值大小嘛,小盆友都会,本质上是选拔的“何人大何人上”的轨道。在以前,大家只须要关注定位元素的z-index就好,可是,在CSS3时代,flex子项也支撑z-index,使得大家面对的图景比原先要负复杂。然则,好的是,规则都是平等的,对于z-index的运用和表现也是如此,套用上边的7阶层叠顺序表就足以了。

一样,举个简易例子,看下z-index:-1z-index:1浮动对层叠表现的熏陶,如下两段HTML:

<div style=”display:flex; background:blue;”> <img src=”mm1.jpg”
style=”<mark>z-index:-1;</mark>”/></div>

1
2
<div style="display:flex; background:blue;">
   <img src="mm1.jpg" style="<mark>z-index:-1;</mark>"/></div>

<div style=”display:flex; background:blue;”> <img src=”mm1.jpg”
style=”<mark>z-index:1;</mark>”/></div>

1
2
<div style="display:flex; background:blue;">
   <img src="mm1.jpg" style="<mark>z-index:1;</mark>"/></div>

最后,会发现,z-index:-1跑到了背景象小面,而z-index:1高高在上。

亚洲必赢官网 44

一个与层叠上下文相关的诙谐的来得现象

在实际项目中,大家兴许会渐进使用CSS3的fadeIn淡入animation效果增强体验,于是,大家或许就会蒙受类似上边的现象:

你可以狠狠位置击那里:CSS3
fadeIn淡入animation动画有趣现象

有一个纯属定位的灰色半透明层覆盖在图纸上,默许显示是那样的:
亚洲必赢官网 45

可是,一旦图片起初走fadeIn淡出的CSS3动画片,文字跑到图片前边去了亚洲必赢官网 46
亚洲必赢官网 47

缘何会那样?

事实上,学了本文的始末,就很粗略了!fadeIn动画本质是opacity透明度的转移:

@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

1
2
3
4
5
6
7
8
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

要知道,opacity的值不是1的时候,是具备层叠上下文的,层叠顺序是z-index:auto级别,跟没有z-index值的absolute纯属定位元素是平起平坐的。而本demo中的文字元素在图片元素的前头,于是,当CSS3动画只要不是终极一瞬间的opacity: 1,位于DOM流后边的图纸就会安分守己“青出于蓝”准则,覆盖文字。

这就是原因,于是,大家想要解决这么些题材就很简短。

  1. 调整DOM流的先后顺序;

  2. 抓好文字的层叠顺序,例如,设置z-index:1;

五、总结

z-index那东西深不可测,里面所蕴藏的学问不是
CSS手册上的这一点东西,那只是冰山一角。这提到到border及background的堆叠模型,涉及到同层级的显示难点,以及浏览器突显的些体制等,
那是很深的一潭水。

 

八、结束语

如若元素暴发层叠,要解释其展现,基本上就本文的那些情节了。

自身发现众多重构小伙伴都有z-index滥用,或者使用不正规的题材。我觉着最重大的缘故或者对了然层叠上下文以及层叠顺序那几个概念都不通晓。例如,只要采纳了定点元素,越发absolute纯属定位,都离不开设置一个z-index值;或者只要元素被其他因素覆盖了,例如变成定位元素或者增加z-index值进步。页面一扑朔迷离,必然搞得乱七八糟。

实质上,在我看来,觉得多数宽广,z-index根本就不曾出现的必需。知道了内联元素的层叠水平比块探花素高,于是,某条线你想覆盖上去的时候,须求设置position:relative吗?不需要,inline-block化就能够。因为IE6/IE7
position:relative会创建层叠上下文,很烦的。

OK,本文已经够长了,就不多啰嗦了。

表现匆忙,出错在所难免,欢迎大力指正。也欢迎种种方式的交换,或者提议文中概念性的失实。

谢谢阅读!

1 赞 7 收藏
评论

亚洲必赢官网 48

网站地图xml地图