>

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

- 编辑:至尊游戏网站 -

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

浓重了然CSS中的层叠上下文和层叠顺序

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

初藳出处爬山涉水 张鑫旭   

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

在这里个世界上,所有的事皆有个前后相继顺序,凡物都有个循次进取。比如说酒店排队打饭,对啊,讲求先到先得,总不可能蜂拥而入。再譬喻说说领导权,爱妻的话长久是没有错,领导的话长久是没错。

在CSS届,也是那样。只是,经常情状下,大家平平静静,看不出什么差别,即所谓的动物平等。可是,当发生矛盾产生争论的时候,显明,是不容许形成完全等同的,前后相继顺序,身份差别就显现出来了。比如,杰克和罗斯,只可以壹人浮在木板上,此时,出现了冲突,结果大家都精晓的。那对于CSS世界中的成分来讲,所谓的“矛盾”指什么吧,个中,很关键的一个局面便是“层叠展现冲突”。

暗中认可意况下,网页内容是一向不偏移角的垂直视觉呈现,当内容产生层叠的时候,一定会有四个前后的层叠顺序产生,有一些相近于实际世界中循次进取的以为。

而要精晓网页相月素是怎样“循次进取”的,就必要深切明白CSS中的层叠上下文和层叠顺序。

小编们我们莫不都胸有定见CSS中的z-index特性,要求跟大家讲的是,z-index事实上只是CSS层叠上下文和层叠顺序中的一叶小舟。

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

蒸蒸日上、什么是层叠上下文

层叠上下文,斯洛伐克语名称叫”stacking context”. 是HTML中的二个三维的概念。要是一个成分含有层叠上下文,大家得以知晓为那几个成分在z轴上就“卓尔不群”。

此间出现了二个名词-z轴,指的是怎么吗?

表示的是客商与显示屏的那条看不见的垂直线(参见下图表示-红线)爬山涉水
至尊游戏网站 1

层叠上下文是三个定义,跟「块状格式化上下文(BFC)」肖似。可是,概念那一个事物是比较虚相比较空虚的,要想轻巧驾驭,大家须要将其具象化。

怎么个有板有眼化法呢?

你可以把「层叠上下文」明白为当官跋山涉水的近义词网页中有许多过多的因素,大家得以视作是真实世界的大千世界。真实世界里,大家大多数人是经常贩夫皂隶们,还恐怕有局地人是从事政务的经理。OK,这里的“官员”就足以通晓为网页中的层叠上下文元素。

换句话说,页面中的成分有了层叠上下文,就好比大家多如牛毛平民百姓当了官,龙腾虎跃旦当了官,相比平时布衣黔首来讲,离皇上更近了,对不对,就同一网页七月素等级越来越高,离大家客户更近了。

至尊游戏网站 2

概念

层叠上下文,捷克语名为”stacking context”. 是HTML中的贰个三个维度的定义。层叠水平和CSS的z-index属性无法歪曲,有个别情状下z-index确实可以影响层叠水平。不过,只限于定位成分甚至flex盒子的男女成分;而层叠水平具有的要素都留存。

二、什么是层叠水平

再来讲说层叠水平。“层叠水平”希腊语名称叫”stacking level”,决定了同叁个层叠上下文桐月素在z轴上的显示顺序。level那个词十分轻便让大家联想到大家确实世界中的三等九般、循次进取。真实世界中,各样人都是独立的村办,包含同卵双胞胎,有异样就有分别。比如,双胞胎即使长得像Ctrl+C/Ctrl+V得到的,但实质上,出生时间仍有先后顺序的,先出生的百般就大,妹夫或二嫂。网页中的成分也是那般,页面中的各种元素都以独自的私有,他们自然是会有一个周边的排行排序的场地存在。而那么些排名排序、依流平进正是我们这边所说的“层叠水平”。层叠上下文成分的层叠水平足以了解为高管的职务和等第,1品2品,厅长参谋长之类;对于普通成分,那几个嘛……你和煦随意驾驭。

于是,可想而知,全数的因素都有层叠水平,包罗层叠上下文成分,层叠上下文成分的层叠水平足以领会为官员的职务和品级,1品2品,市长市长之类。然后,对于普通成分的层叠水平,我们的追究仅仅局限在时下层叠上下文元素中。为啥吧?因为否则未有意义。

那样驾驭呢~ 上边提过成分具有层叠上下文好比当官,大家都驾驭的,那当官的家里都有丫鬟啊保镖啊管家啊什么的。所谓打狗看主人,A官员家里的管家和B官员家里的管家做PK实际上是从未有过意思的,因为她们牛不牛逼完全由她们的主人决定的。一人飞升一人得道,你说那和善保家里的管家和七侠镇娄知县提辖家里的管家有可比性吗?李鹏的书记是还是不是分分钟灭了您村支书的秘书(借使有)。

翻译成术语正是跋山涉水的近义词普通成分的层叠水平优先由层叠上下文决定,由此,层叠水平的相比唯有在当前层叠上下文成分中才有含义。

至尊游戏网站 3

内需注意的是,诸位千万不要把层叠水平和CSS的z-index属性同日而道。对的,某个情状下z-index确实可以影响层叠水平,不过,只限于定位成分以至flex盒子的子女成分;而层叠水平具备的要素都留存。

在暗中认可景况下(是在css3此前)

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

三、什么是层叠顺序

再来说说层叠顺序。“层叠顺序”罗马尼亚语名为”stacking order”. 表示成分发生层叠时候全部一定的垂直显示顺序,注意,这里跟上边七个不平等,上边的层叠上下文和层叠水平是概念,而这里的层叠顺序是法规

在CSS2.1的年份,在CSS3还没曾出现的时候(注意这里的前提),层叠顺序法规遵守上面那张图跋山涉水的近义词
至尊游戏网站 4

有人或者有见过形似图,那么些图是不计其数广春节前老外绘制的,匈牙利语内容。而是更首要的是境内估算未有同行实行过注解与奉行,实际上比很多器重消息缺点和失误。上边是自己自身手动重绘的汉语版同不寻常间补充非常多别样地方相对未有的关键文化音信。借使想要无水印高清大图,点击这里购买(0.5元)。

缺点和失误的主要消息包罗跋山涉水的近义词

  1. 坐落最低水平的border/background指的是层叠上下文成分的边框和背景观。每一个层叠顺序法规适用于三个完璧归赵的层叠上下文成分。
  2. 原图未有显示inline-block的层叠顺序,实际上,inline-block和inline水平成分是大器晚成致level等第。
  3. z-index:0实际上和z-index:auto单纯从层叠水平上看,是能够用作是如出一辙的。注意这里的用语——“单纯从层叠水平上看”,实际上,两个在层叠上下文领域具有根特性的异样。

上面笔者要向大家发问了,大家有没有想过,为何内联成分的层叠顺序要比改造元素和块状成分都高?
至尊游戏网站 5

怎么呢?我料定认为浮动成分和块状成分要更屌一点啊。

嘿嘿嘿,作者就不卖关子了,直接看下图的标号表达爬山涉水
至尊游戏网站 6

诸如border/background诚如为点缀属性,而生成和块状成分经常作为布局,而内联元素都以内容。网页中最根本的是如何?当然是内容了哈,对不对!

所以,应当要让内容的层叠顺序超级高,当发生层叠是很好,主要的文字啊图片内容能够先行揭发在显示器上。举个例子,文字和变化图片重叠的时候跋山涉水的近义词

至尊游戏网站 7

上面说的这一个层叠顺序法则依然老时期的,假设把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成了层叠背景。

四、必需牢记的层叠准绳

下边这两个是层叠领域的纯金守则。当成分爆发层叠的时候,其遮住关系死守上边2个准绳跋山涉水的近义词

  1. 何人大什么人上跋山涉水的近义词当有着分明的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那些覆盖小的那个。通俗讲正是官大的压死官立小学的。
  2. 后起之秀超过前辈爬山涉水当成分的层叠水平相近、层叠顺序相同的时间,在DOM流中居于末端的因素会覆盖后边的因素。

在CSS和HTML领域,只要成分发生了重叠,都离不开下边那多个白银守则。因为前边会有多少个实例证实,这里就到此截止。

opacity与层叠上下文

当opacity小于1时,就改为层叠上下文。遵从下面法则,父级div成了层叠背景

五、层叠上下文的特征

层叠上下文成分犹如下特点跋山涉水的近义词

  • 层叠上下文的层叠水平要比日常成分高(原因前边会表达);
  • 层叠上下文能够阻断成分的搅动情势(见此文第二有的验证);
  • 层叠上下文可以嵌套,内部层叠上下文及其具有子成分均受制于外界的层叠上下文。
  • 每种层叠上下文和兄弟元素独立,也正是当实行层叠变化或渲染的时候,只必要牵记后代元素。
  • 种种层叠上下文是自成类其他,当成分产生层叠的时候,整个因素被感觉是在父层叠上下文的层叠顺序中。

翻译成真实世界语言正是跋山涉水的近义词

  • 当官的比一般人更有机缘面见君王;
  • 主任下去考查,会被当地CEO隔离只看到到繁荣看不到真实民情;
  • 叁个家里,老爹可以当官,孩子也是能够何况当官的。不过,孩子那一个官要受老爹决定。
  • 本人当官,兄弟不占光。有怎么样低价依然变化只会影响本人的子女们。
  • 各样当官的都有属于本人的小团体,当家眷管家发生摩擦冲撞的时候(包涵和其他董事长的家眷管家),都以要优先看当官的也正是庄家的声色。
** transform与层叠上下文**

增添transform,也会成为层叠上下文

六、层叠上下文的创制

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

嘿嘿。就如块状格式化上下文,层叠上下文也大半是有部分特定的CSS属性创制的。笔者将其计算为3个派别,也等于从事政务的3种路子跋山涉水的近义词

  1. 名门大族派跋山涉水的近义词页面根成分天生具备层叠上下文,称之为“根层叠上下文”。
  2. 科学考察入选派爬山涉水z-index值为数值的一定元素的价值观层叠上下文。
  3. 任何当官渠道:其他CSS3属性。

//zxx: 下边相当多例子是实时CSS效果,提议你去原地点浏览,以便预览改善确的功能。

①. 根层叠上下文

指的是页面根成分,也正是滚动条的暗中同意的祸首罪魁<html>`元素。这就是为什么,绝对定位元素在left/top`等值定位的时候,若无其余定位成分约束,会相对浏览器窗口定位的缘由。

②. 定位成分与历史观层叠上下文

对此包罗有position:relative/position:absolute的固定成分,以至Fire福克斯/IE浏览器(不满含Chrome等webkit内核浏览器)(这两天,也正是二〇一五新禧是如此)下包蕴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>

至尊游戏网站 8

大家会意识,竖着的妹子(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>

至尊游戏网站 9

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

至尊游戏网站 10

缘何小小的改造会有想法的结果吗?
至尊游戏网站 11

不同就在于,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 */
}

结果如下跋山涉水的近义词

至尊游戏网站 12

会意识,妹子跑到灰白背景的上边了。为何吗?层叠顺序图能够找到答案,如下爬山涉水
至尊游戏网站 13

从上海体育场所能够见见负值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 */
}

结果:

至尊游戏网站 14

会开掘,妹子在黄绿背景下面突显了,为啥吧?层叠顺序图能够找到答案,如下跋山涉水的近义词
至尊游戏网站 15
从上图能够看来负值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;
}

结果如下爬山涉水

至尊游戏网站 16

下一场价格光滑度,举个例子二分之一晶莹剔透爬山涉水

.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;
}

结果如下跋山涉水的近义词

至尊游戏网站 17

缘由就是半晶莹剔透成分具备层叠上下文,妹子图片的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;
}

结果如下爬山涉水

至尊游戏网站 18

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;
}

结果如下跋山涉水的近义词

至尊游戏网站 19

供给潜心的是,目前,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;
}

结果如下跋山涉水的近义词

至尊游戏网站 20

好吧,果然被您猜对了,妹子乳白床的面上躺着,只是你眼镜摘了,看得微微缺乏真诚罢了。

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;
}

布局如下跋山涉水的近义词

至尊游戏网站 21

会意识,横妹子被混合形式了。此时,大家给大嫂所在容器扩张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;
}

结果为:

至尊游戏网站 22

会意识横着的妹子跑到黄褐背景上面了。那表显明实制造了层叠上下文。
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;
}

结果如下跋山涉水的近义词

至尊游戏网站 23

果如其言情理之中,妹子上了玫瑰紫的背景。

总结:
  1. 第后生可畏关切的是是或不是是层叠成分,若是是层叠元素,就依据层叠准绳(图)作相比较。不是层叠成分的,就在图中暗中认可意况。
  2. 在css3,以下会让要素变为层叠成分跋山涉水的近义词
  • opacity小于1
  • 新的filter属性
  • transform
  • 父级成分为flex属性
  1. 比大小值,同级看顺序。

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

正文多次涉及,如火如荼旦普通成分具备了层叠上下文,其层叠顺序就能变高。那它的层叠顺序毕竟在哪些岗位吗?

此地必要分三种境况讨论爬山涉水

  1. 假使层叠上下文成分不依附于z-index数值,则其层叠顺序是z-index:auto可看成z:index:0级别;
  2. 若是层叠上下文成分正视z-index数值,则其层叠顺序由z-index值决定。

于是,大家地方提供的层叠顺序表,实际上依旧缺少任何首要音信。作者又花武术重新绘制了三个更完整的7阶层叠顺序图(同样的版权所有,商业请购买,可得无水印大图)跋山涉水的近义词

至尊游戏网站 24

世家领略为何一定元素会层叠在经常成分的方面吧?

其根本原因就在于,元素后生可畏旦成为固定成分,其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"/>

至尊游戏网站 25

会开采,两个样式同样,仅仅是在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高高在上。

至尊游戏网站 26

一个与层叠上下文相关的风趣的显得现象

在骨子里项目中,大家大概会渐进使用CSS3的fadeIn淡入animation效果巩固体验,于是,我们恐怕就能遇见相近下边包车型地铁情景跋山涉水的近义词

您能够狠狠地点击这里跋山涉水的近义词CSS3 fadeIn淡入animation动画有趣现象

有贰个万万定位的中黄半透明层覆盖在图纸上,默许呈现是那样的跋山涉水的近义词
至尊游戏网站 27

可是,风华正茂旦图片初步走fadeIn淡出的CSS3动画,文字跑到图片前边去了至尊游戏网站 28
至尊游戏网站 29

缘何会如此?

实质上,学了本文的从头到尾的经过,就非常的粗略了!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滥用,可能利用不标准的标题。笔者以为最要害的源委也许对精通层叠上下文以至层叠顺序这个概念都不通晓。比方,只要利用了向来成分,极度absolute纯属定位,都离不开设置二个z-index值;或然龙精虎猛旦成分被其他因素覆盖了,比如形成定位成分或许扩大z-index值进步。页面意气风发繁琐,必然搞得杂乱无章。

实际,在作者眼里,以为诸多常见,z-index根本就从不出现的不能缺少。知道了内联成分的层叠水平比块状成分高,于是,某条线你想覆盖上去的时候,必要设置position:relative吗?不需要,inline-block化就可以。因为IE6/IE7 position:relative会创建层叠上下文,很烦的。

OK,本文已经够长了,就十分的少啰嗦了。

行事匆忙,出错在所无免,款待大力指正。也迎接种种款式的沟通,恐怕建议文中概念性的荒诞。

多谢阅读!

1 赞 7 收藏 评论

至尊游戏网站 30

本文由技术教程发布,转载请注明来源:层叠上下文,深入理解CSS中的层叠上下文和层叠