【亚洲必赢官网】错落方式,isolate的变现和功用

知道CSS3 isolation: isolate的表现和意义

2016/01/10 · CSS ·
isolate

原文出处:
张鑫旭   

长远明白CSS中的层叠上下文和层叠顺序

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

原稿出处:
张鑫旭   

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

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

在CSS届,也是如此。只是,一般景况下,我们平平静静,看不出什么差距,即所谓的动物平等。不过,当发生争辨发生纠纷的时候,显明,是不容许做到完全平等的,先后顺序,身份差距就显现出来了。例如,Jack和罗丝,只能够一人浮在木板上,此时,出现了顶牛,结果大家都知情的。那对于CSS世界中的元素而言,所谓的“争辩”指什么啊,其中,很关键的一个范围就是“层叠突显争执”。

默许情形下,网页内容是未曾偏移角的垂直视觉展现,当内容发生层叠的时候,一定会有一个光景的层叠顺序发生,有点类似于真实世界中论资排辈的感觉到。

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

大家大家或许都熟练CSS中的z-index特性,须求跟我们讲的是,z-index实则只是CSS层叠上下文和层叠顺序中的一叶小舟。

mix-blend-mode 混合情势 background-blend-mode 背景混合形式 isolation:isolate 隔离,mixblendmode

css3 mix-blend-mode 混合形式
  该属性不仅可以效能于HTML,还能成效于SVG
  兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari
7【亚洲必赢官网】错落方式,isolate的变现和功用。~9.1
  匡助的值很多:
  mix-blend-mode:normal;    //正常
  mix-blend-mode:multiply;   //正片叠加
  mix-blend-mode:screen;   //滤色
  mix-blend-mode:overlay;   //叠加
  mix-blend-mode:darken;   //变暗
  mix-blend-mode:lighten;   //变亮
  mix-blend-mode:color-dodge;   //颜色减淡
  mix-blend-mode:color-burn;   //颜色加深
  mix-blend-mode:hard-light;   //强光
  mix-blend-mode:soft-light;   //柔光
  mix-blend-mode:difference;   //差值
  mix-blend-mode:exclusion;   //排除
  mix-blend-mode:hue;     //色相
  mix-blend-mode:color;     //颜色
  mix-blend-mode:luminosity; //亮度
  mix-blend-mode:initial;   //初始
  mix-blend-mode:inherit;   //继承
  mix-blend-mode:unset;   //复原

css3 background-blend-mode 背景混合方式
  可以是背景图片见的长短不一情势,也可以是背景图片和背景观的混杂。
  兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari
7~9.1
  CSS3
backgrounds多背景IE9+浏览器就起来援救了,因而,你想混合多图,就是要逗号,一个一个写在background属性中就足以了,
  .box {
    background: url(mm1.jpg) no-repeat center, url(mm2.jpg)
no-repeat center;
  }

css3 isolation:isolate 隔离
  值除了万年不变的inherit外还包蕴auto和isolate
  isolation:isolate 的原理:本质上是因为 isolation:isolate
创设一个新的层叠上下文。
  只要有元素得以创立层叠上下文,就足以阻断mix-blend-mode
    1.z-index值不为auto的position:relative/position:absolute定位元素。
    2.position:fixed,仅限Chrome浏览器,其余浏览器遵守上一条,需求z-index为数值。
    3.z-index值不为auto的flex项(父元素display:flex|inline-flex)。
    4.元素的opacity值不是1。
    5.元素的transform值不是none。
    6.元素mix-blend-mode值不是normal。
    7.元素的filter值不是none。
    8.will-change指定的属性值为地点任意一个。
    9.元素的-webkit-overflow-scrolling设为touch。

混合模式 background-blend-mode
背景混合方式 isolation:isolate 隔离,mixblendmode css3 mix-blend-mode
混合形式 该属性不仅可以功效于HTML,还…

css3 mix-blend-mode 混合情势
  该属性不仅能够功用于HTML,仍可以功能于SVG
  兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari
7~9.1
  接济的值很多:
  mix-blend-mode:normal;    //正常
  mix-blend-mode:multiply;   //正片叠加
  mix-blend-mode:screen;   //滤色
  mix-blend-mode:overlay;   //叠加
  mix-blend-mode:darken;   //变暗
  mix-blend-mode:lighten;   //变亮
  mix-blend-mode:color-dodge;   //颜色减淡
  mix-blend-mode:color-burn;   //颜色加深
  mix-blend-mode:hard-light;   //强光
  mix-blend-mode:soft-light;   //柔光
  mix-blend-mode:difference;   //差值
  mix-blend-mode:exclusion;   //排除
  mix-blend-mode:hue;     //色相
  mix-blend-mode:color;     //颜色
  mix-blend-mode:luminosity; //亮度
  mix-blend-mode:initial;   //初始
  mix-blend-mode:inherit;   //继承
  mix-blend-mode:unset;   //复原

一、关于isolation

isolation是一个CSS3属性,顾名思意是“隔离”,协助的值除了万年不变的inherit外还包罗autoisolate.

一而再没什么好说的。auto实际就是不干事的意味,是因素的默认值。所以,大家只需求关爱isolation: isolate以此宣称就好了。

isolation: isolate正如其语义,就是割裂的意趣,那隔离什么吧?本义是用来隔断mix-blend-mode要素的混杂。

关于mix-blend-mode混合情势可以参考我事先的稿子:“CSS3混合方式mix-blend-mode简介”。

当元素应用了混合格局的时候,默许处境下,其会掺杂z轴上独具层叠顺序比其低的层叠元素。

不过,有时候,我们愿意混合方式只到某一个元素,或者只是某一组元素如何是好呢?isolation: isolate即使为了缓解那个题材时有暴发的。

你可以狠狠地方击那里:isolation:
isolate功能演示demo

如下CSS和HTML结构:

.box { background-color: #0074D9; } .inner { width: 256px; height:
256px; background: url(mm1.jpg) no-repeat; } .mode { position: relative;
right: -100px; mix-blend-mode: darken; }

1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
    background-color: #0074D9;
}
.inner {
    width: 256px;
    height: 256px;
    background: url(mm1.jpg) no-repeat;    
}
.mode {
    position: relative;
    right: -100px;
    mix-blend-mode: darken;
}

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

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

此刻,mm2那么些竖妹子不仅和mm1横妹子暴发了混合,还和黑色的背景象暴发了交集。

亚洲必赢官网 1

接下来,大家想要完毕的功用是,仅仅两张图片暴发混合,那时候应该怎么做?

那儿就足以应用isolation:isolate进展阻断,形成一个混合组。组以外的其他因素不会生出层叠。

之所以,例如,点击demo页面的按钮,给.inner这层div要素增加isolation:isolate
我们会发现,mm2这一个竖妹子没有和黑色背景象发生混合,如下截图:
亚洲必赢官网 2

一、什么是层叠上下文

层叠上下文,英文名叫”stacking context”.
是HTML中的一个三维的概念。假若一个因素含有层叠上下文,我们可以清楚为这么些元素在z轴上就“卓尔不群”。

这边出现了一个名词-z轴,指的是哪些吗?

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

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

怎么个有血有肉化法呢?

你可以把「层叠上下文」掌握为当官:网页中有许多众多的因素,大家可以看作是实事求是世界的众人。真实世界里,大家超过一半人是平时老百姓们,还有部分人是从政的老董。OK,那里的“官员”就足以知晓为网页中的层叠上下文元素。

换句话说,页面中的元素有了层叠上下文,就好比大家家常便饭老百姓当了官,一旦当了官,比较平时老百姓而言,离君主更近了,对不对,就相同网页中元素级别更高,离大家用户更近了。

亚洲必赢官网 4

css3 background-blend-mode 背景混合格局
  可以是背景图片见的犬牙相错情势,也可以是背景图片和背景观的混杂。
  兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 Safari
7~9.1
  CSS3
backgrounds多背景IE9+浏览器就起来辅助了,由此,你想混合多图,就是要逗号,一个一个写在background属性中就可以了,
  .box {
    background: url(mm1.jpg) no-repeat center, url(mm2.jpg)
no-repeat center;
  }

二、isolation:isolate成效的规律

isolation:isolate为此可以阻断混合情势的开展,本质上是因为isolation:isolate创制一个新的层叠上下文(stacking
context)。

没错,之所以起功用,就是仅仅地因为创设了新的层叠上下文。本身并不曾做哪些新鲜的事体。或者本身得以那样勇敢的说:“isolation:isolate除去创立层叠上下文,其他没有其余鸟用!”

可能有人会疑窦,倘若根据你的说法,岂不是任何可以成立层叠上下文的性质都足以阻断mix-blend-mode的生效?

不错,就是那样子的!

只要元素得以创设层叠上下文,就能够阻断mix-blend-mode!

于是,不仅仅是isolation:isolate,上边那么些也是可以的:

  1. z-index值不为autoposition:relative/position:absolute向来元素。
  2. position:fixed,仅限Chrome浏览器,其余浏览器听从上一条,须要z-index为数值。
  3. z-index值不为autoflex项(父元素display:flex|inline-flex).
  4. 元素的opacity值不是1.
  5. 元素的transform值不是none.
  6. 元素mix-blend-mode值不是normal.
  7. 元素的filter值不是none.
  8. will-change点名的属性值为地方任意一个。
  9. 元素的-webkit-overflow-scrolling设为touch.

眼见为实,您可以狠狠地方击那里:层叠上下文与混合方式阻隔测试demo

分选随机一款层叠上下文,大家都得以感受到对mix-blend-mode的阻隔,例如:
亚洲必赢官网 5

二、什么是层叠水平

再来说说层叠水平。“层叠水平”英文名叫”stacking
level”,决定了同一个层叠上下文中元素在z轴上的浮现顺序。level这一个词很简单让大家联想到大家真正世界中的三六九等、论资排辈。真实世界中,每个人都是独立的民用,包含同卵双胞胎,有距离就有分别。例如,双胞胎就算长得像Ctrl+C/Ctrl+V得到的,但实质上,出生时间或者有先后顺序的,先出生的老大就大,妹夫或大嫂。网页中的元素也是那样,页面中的每个元素都是独自的村办,他们肯定是会有一个看似的名次排序的景观存在。而以此名次排序、论资排辈就是我们那里所说的“层叠水平”。层叠上下文元素的层叠水平足以知道为高管的职级,1品2品,市长局长之类;对于普通元素,那些嘛……你协调随便明白。

于是乎,不言而喻,所有的因素都有层叠水平,包罗层叠上下文元素,层叠上下文元素的层叠水平足以知晓为经理的职级,1品2品,参谋长部长之类。然后,对于普通元素的层叠水平,我们的研讨仅仅局限在脚下层叠上下文元素中。为何吧?因为否则没有意义。

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

翻译成术语就是:普通元素的层叠水平优先由层叠上下文决定,由此,层叠水平的比较唯有在现阶段层叠上下文元素中才有意义。

亚洲必赢官网 6

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

css3 isolation:isolate 隔离
  值除了万年不变的inherit外还包罗auto和isolate
  isolation:isolate 的法则:本质上是因为 isolation:isolate
创设一个新的层叠上下文。
  只要有元素得以创立层叠上下文,就足以阻断mix-blend-mode
    1.z-index值不为auto的position:relative/position:absolute定位元素。
    2.position:fixed,仅限Chrome浏览器,其他浏览器遵守上一条,须求z-index为数值。
    3.z-index值不为auto的flex项(父元素display:flex|inline-flex)。
    4.元素的opacity值不是1。
    5.元素的transform值不是none。
    6.元素mix-blend-mode值不是normal。
    7.元素的filter值不是none。
    8.will-change点名的属性值为地点任意一个。
    9.元素的-webkit-overflow-scrolling设为touch。

三、关于background-blend-mode

掺杂形式领域还有一个重大的玩意儿就是background-blend-mode,
背景混合模式。这这些CSS属性须求isolation:isolate展开围堵吗?答案是不需求。background-blend-mode后天是一个查封的老婆当军领域,不会影响其余因素。

以上~

三、什么是层叠顺序

再来说说层叠顺序。“层叠顺序”英文名叫”stacking order”.
表示元素暴发层叠时候所有特定的垂直彰显顺序,注意,那里跟下边三个不均等,上边的层叠上下文和层叠水平是概念,而那边的层叠顺序是平整

在CSS2.1的年份,在CSS3还没有出现的时候(注意那里的前提),层叠顺序规则听从下边那张图:
亚洲必赢官网 7

有人或许有见过类似图,那些图是多多益善众多年前老外绘制的,英文内容。而是更关键的是境内推断没有同行进行过讲明与实施,实际上很多至关主要音信缺失。上面是自身要好手动重绘的汉语版同时补充很多其余地点相对没有的主要文化音讯。若是想要无水印高清大图,点击那里购买(0.5元)。

缺失的重点新闻包蕴:

  1. 坐落最低水平的border/background指的是层叠上下文元素的边框和背景观。每一个层叠顺序规则适用于一个总体的层叠上下文元素。
  2. 原图没有展现inline-block的层叠顺序,实际上,inline-block和inline水平元素是平等level级别。
  3. z-index:0实际上和z-index:auto单纯从层叠水平上看,是能够当做是相同的。注意那里的用语——“单纯从层叠水平上看”,实际上,两者在层叠上下文领域有所根本性的差异。

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

缘何吧?我明显感觉浮动元素和块探花素要更屌一点哟。

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

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

故而,一定要让内容的层叠顺序相当高,当暴发层叠是很好,主要的文字啊图片内容可以预先暴光在屏幕上。例如,文字和生成图片重叠的时候:

亚洲必赢官网 10

地方说的这几个层叠顺序规则仍旧老时代的,假如把CSS3也牵涉进来,科科,事情就差别了。

四、结束语

如上所述,CSS3不仅是增多了有些表现层的事物,类似层叠上下文这样的概念变得更其厚重了,其幕后的大队人马错落在一块的涉嫌也比想象的繁杂,可是又是相互印证的系统。

CSS的就学或者良好繁重的。

亚洲必赢官网 11

1 赞 1 收藏
评论

亚洲必赢官网 12

四、务必牢记的层叠准则

下边那三个是层叠领域的黄金守则。当元素暴发层叠的时候,其遮住关系遵循上面2个准则:

  1. 什么人大何人上:当所有无可争执的层叠水平标示的时候,如识其余z-indx值,在同一个层叠上下文领域,层叠水平值大的那个覆盖小的那么些。通俗讲就是官大的压死官小的。
  2. 后来者居上:当元素的层叠水平同样、层叠顺序相同的时候,在DOM流中居于末端的元素会覆盖前边的元素。

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

五、层叠上下文的性状

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

  • 层叠上下文的层叠水平要比寻常元素高(原因前边会表明);
  • 层叠上下文可以阻断元素的长短不一情势(见此文第二有的验证);
  • 层叠上下文可以嵌套,内部层叠上下文及其具有子元素均受制于外部的层叠上下文。
  • 种种层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只须要考虑后代元素。
  • 每个层叠上下文是自成体系的,当元素暴发层叠的时候,整个因素被认为是在父层叠上下文的层叠顺序中。

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

  • 当官的比普通人更有空子面见天皇;
  • 官员下去考察,会被地方CEO阻隔只见到繁荣看不到真实民情;
  • 一个家里,四叔可以当官,孩子也是可以同时当官的。不过,孩子那些官要受岳丈决定。
  • 和谐当官,兄弟不占光。有怎样便宜依然变化只会影响自己的子女们。
  • 每个当官的都有属于自己的小团体,当家眷管家发生摩擦冲撞的时候(包涵和其他管事人的家眷管家),都是要事先看当官的也就是主人公的气色。

六、层叠上下文的创始

卖了那般多文字,到底层叠上下文是个怎样鬼,倒是拿出来瞅瞅啊!

哈哈哈。就像块状格式化上下文,层叠上下文也大多是有一对特定的CSS属性创建的。我将其统计为3个山头,也就是从政的3种途径:

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

//zxx:
上面很多例证是实时CSS效果,提出您去原地点浏览,以便预览更确切的法力。

①. 根层叠上下文

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

②. 定位元素与价值观层叠上下文

对于富含有position:relative/position:absolute的永恒元素,以及FireFox/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>

亚洲必赢官网 13

世家会发觉,竖着的妹妹(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>

亚洲必赢官网 14

世家会发觉,尼玛反过来了,竖着的胞妹(mm2)那回趴在了横着的阿妹(mm1)身上。

亚洲必赢官网 15

怎么小小的改变会有想法的结果吧?
亚洲必赢官网 16

出入就在于,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 */
}

结果如下:

亚洲必赢官网 17

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

从上图可以见见负值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 */
}

结果:

亚洲必赢官网 19

会意识,妹子在紫色背景上面彰显了,为啥呢?层叠顺序图可以找到答案,如下:
亚洲必赢官网 20
从上图能够见到负值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;
}

结果如下:

亚洲必赢官网 21

接下来价格透明度,例如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;
}

结果如下:

亚洲必赢官网 22

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

结果如下:

亚洲必赢官网 23

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

结果如下:

亚洲必赢官网 24

急需小心的是,方今,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;
}

结果如下:

亚洲必赢官网 25

行吗,果然被你猜对了,妹子青色床上躺着,只是你眼镜摘了,看得有些不够真诚罢了。

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

布局如下:

亚洲必赢官网 26

会发现,横妹子被混合方式了。此时,大家给二姐所在容器增加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;
}

结果为:

亚洲必赢官网 27

会发现横着的胞妹跑到青色背景上面了。这标志确实创造了层叠上下文。
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;
}

结果如下:

亚洲必赢官网 28

果然不出所料,妹子上了灰色的背景。

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

本文多次涉及,一旦普通元素具有了层叠上下文,其层叠顺序就会变高。那它的层叠顺序究竟在哪些岗位吗?

此地须要分三种状态探讨:

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

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

亚洲必赢官网 29

世家知晓为啥一定元素会层叠在经常元素的方面吧?

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

亚洲必赢官网 30

会发觉,两者样式一样,仅仅是在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高高在上。

亚洲必赢官网 31

一个与层叠上下文相关的幽默的显示现象

在其实项目中,大家或许会渐进使用CSS3的fadeIn淡入animation效果增强体验,于是,大家恐怕就会遇上类似上边的场景:

您可以狠狠地方击那里:CSS3
fadeIn淡入animation动画有趣现象

有一个纯属定位的黑色半透明层覆盖在图片上,默许展现是如此的:
亚洲必赢官网 32

可是,一旦图片开头走fadeIn淡出的CSS3卡通,文字跑到图片前面去了亚洲必赢官网 33
亚洲必赢官网 34

干什么会这么?

事实上,学了本文的情节,就很简短了!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 收藏
评论

亚洲必赢官网 35

相关文章

网站地图xml地图