【澳门葡京】座谈一些有意思的CSS标题,和层叠顺序

有意思的CSS标题(3): 层叠顺序与堆栈上下文知多少

2016/09/29 · CSS ·
CSS

本文小编: 伯乐在线 –
chokcoco
。未经作者许可,禁止转发!
欢迎参加伯乐在线 专栏撰稿人。

开本连串,讨论一些妙趣横生的 CSS
标题,抛开实用性而言,一些问题为了拓宽一下缓解难点的思路,别的,涉及一些便于忽略的
CSS 细节。

解题不考虑包容性,标题天马行空,想到如何说怎么着,假使解题中有你觉拿到生僻的
CSS 属性,赶紧去补习一下啊。

不断更新,不断更新,不断更新,首要的事体说几遍。

座谈一些诙谐的CSS标题(1):
左边竖条的贯彻方式

座谈一些妙趣横生的CSS标题(2):
从条纹边框的贯彻谈盒子模型

具有标题汇总在自家的 Github 。

开本连串,探讨一些妙趣横生的
CSS
标题,抛开实用性而言,一些难点为了加大一下消除难点的思路,别的,涉及一些便于忽略的
CSS 细节。

开本系列,讨论一些好玩的
CSS
标题,抛开实用性而言,一些标题为了推广一下缓解难题的笔触,别的,涉及部分便于忽略的
CSS 细节。

层叠上下文【stacking context】

对于stacking
context,在MDN中的描述是

层叠上下文是HTML成分的三维概念,那一个HTML元素在一条假想的相对于面向(电脑显示器的)视窗或许网页的用户的
z 轴上延伸,HTML
成分依照其本人性质依据事先级依次占用层叠上下文的长空。
z轴即用户与显示屏间看不见的垂直线。

三 、层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?

z-index 看上去其实很简单,依据 z-index 的音量决定层叠的优先级,实则深刻进去,会发现内有乾坤。

探访上边那题,定义两个 div A 和
B,被总结在同一个父 div 标签下。HTML结构如下:

XHTML

<div class=”container”> <div class=”inline-block”>#divA
display:inline-block</div> <div class=”float”> #divB
float:left</div> </div>

1
2
3
4
<div class="container">
    <div class="inline-block">#divA display:inline-block</div>
    <div class="float"> #divB float:left</div>
</div>

它们的 CSS 定义如下:

CSS

.container{ position:relative; background:#ddd; } .container > div{
width:200px; height:200px; } .float{ float:left;
background-color:deeppink; } .inline-block{ display:inline-block;
background-color:yellowgreen; margin-left:-100px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container{
    position:relative;
    background:#ddd;
}
.container > div{
    width:200px;
    height:200px;
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

约莫讲述起来,意思就是颇具共同父容器的三个 DIV
重叠在同步,是 display:inline-block 叠在地方,照旧float:left 叠在上头?

留神那里 DOM
的一一,是贡士成 display:inline-block ,再生成 float:left 。当然也足以把七个的
DOM 顺序调转如下:

XHTML

<div class=”container”> <div class=”float”> #divB
float:left</div> <div class=”inline-block”>#divA
display:inline-block</div> </div>

1
2
3
4
<div class="container">
    <div class="float"> #divB float:left</div>
    <div class="inline-block">#divA display:inline-block</div>
</div>

会意识,无论顺序怎么着,始终是 display:inline-block 的 div 叠在上边。

Demo戳我。

 

此地其实是涉及了所谓的层叠水平(stacking
level),有一张图能够很好的注释:

澳门葡京 1

利用上图的逻辑,下边的难题就缓解,inline-blcok 的 stacking level 比之 float 要高,所以不管
DOM 的先后顺序都堆叠在地点。

不过下面图示的布道有一对不精确,依照 W3官方 的说法,准确的
7 层为:

  1. #### the background and borders of the element forming the stacking context.

  2. #### the child stacking contexts with negative stack levels (most negative first).

  3. #### the in-flow, non-inline-level, non-positioned descendants.

  4. #### the non-positioned floats.

  5. #### the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

  6. #### the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

  7. #### the child stacking contexts with positive stack levels (least positive first).

稍稍翻译一下:

  1. #### 形成堆叠上下文环境的因素的背景与边框

  2. #### 拥有负 z-index 的子堆叠上下文成分 (负的越高越堆叠层级越低)

  3. #### 不奇怪流式布局,非 inline-block,无 position 定位(static除外)的子成分

  4. #### 无 position 定位(static除外)的 float 浮动成分

  5. #### 平日流式布局, inline-block元素,无 position 定位(static除外)的子成分(包罗 display:table 和 display:inline )

  6. #### 拥有 z-index:0 的子堆叠上下文成分

  7. #### 拥有正 z-index: 的子堆叠上下文成分(正的越低越堆叠层级越低)

故此大家的七个 div 的相比较是基于上边所列出来的 4 和 5 。5
的 stacking level 更高,所以叠得更高。

不过!但是!然而!重点来了,请小心,上面的相比较是基于多少个 div 都未曾变异 堆叠上下文 那个为根基的。上面大家修改一下难点,给三个 div ,扩充1个 opacity:

CSS

.container{ position:relative; background:#ddd; } .container > div{
width:200px; height:200px; opacity:0.9; // 注意那里,增添三个 opacity }
.float{ float:left; background-color:deeppink; } .inline-block{
display:inline-block; background-color:yellowgreen; margin-left:-100px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container{
    position:relative;
    background:#ddd;
}
.container > div{
    width:200px;
    height:200px;
    opacity:0.9; // 注意这里,增加一个 opacity
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

Demo戳我。

See the Pen stackingContext by
Chokcoco (@Chokcoco) on
CodePen.

会看到,inline-block 的 div 不再一定叠在 float 的 div 之上,而是和
HTML 代码中 DOM 的堆积顺序有关,后添加的 div 会 叠在先添加的 div 之上。

此处的关键点在于,添加的 opacity:0.9 这么些让七个 div
都生成了 stacking context(堆叠上下文) 的定义。此时,要对两者进行层叠排列,就需求z-index ,z-index 越高的层叠层级越高。

堆叠上下文是HTML成分的三维概念,那几个HTML成分在一条假想的争持于面向(电脑屏幕的)视窗只怕网页的用户的
z 轴上延伸,HTML 成分根据其自我性质依照优先级依次占用层叠上下文的半空中。

那就是说,如何触发1个元素形成 堆叠上下文 ?方法如下,摘自 MDN:

  • 根元素 (HTML),
  • z-index 值不为 “auto”的 相对/相对稳定,
  • 一个 z-index 值不为 “auto”的 flex 项目 (flex item),即:父元素
    display: flex|inline-flex,
  • opacity 属性值小于 1 的因素(参考 the specification for opacity),
  • transform 属性值不为 “none”的因素,
  • mix-blend-mode 属性值不为 “normal”的成分,
  • filter值不为“none”的元素,
  • perspective值不为“none”的元素,
  • isolation 属性被装置为 “isolate”的元素,
  • position: fixed
  • 在 will-change 中钦点了任意 CSS 属性,就算你未曾一直内定那么些属性的值
  • -webkit-overflow-scrolling 属性被装置 “touch”的要素

为此,下面大家给五个 div 添加 opacity 属性的目标就是为了形成 stacking
context。也等于说添加 opacity
替换到上边列出来这几个属性都以足以高达同等的功力。

在层叠上下文中,其子成分同样也依照下面表明的规则进行层叠。
尤其值得一提的是,其子元素的 z-index
值只在父级层叠上下文中有意义。意思就是父成分的 z-index 低于父成分另一个同级成分,子成分 z-index再高也没用。

领会地点的 stacking-level 与 stacking-context 是清楚 CSS
的层叠顺序的根本。

拥极度汇总在自小编的 Github ,发到博客希望拿到越来越多的交换。

到此本文截止,若是还有哪些疑难如故提出,能够多多交换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏辅助作者写出越多好小说,感激!

打赏小编

解题不考虑包容性,标题天马行空,想到怎样说怎样,若是解题中有你觉得到生僻的
CSS 属性,赶紧去补习一下啊。

解题不考虑包容性,标题天马行空,想到如何说怎么,倘诺解题中有您倍感到生僻的
CSS 属性,赶紧去补习一下吧。

层叠水平【stacking level】

层叠水平顺序决定了同三个层叠上下文中成分在z轴上的突显顺序

打赏辅助自个儿写出越多好小说,多谢!

任选一种支付办法

澳门葡京 2
澳门葡京 3

1 赞 3 收藏
评论

不断更新,不断更新,不断更新,首要的事体说三回。

【澳门葡京】座谈一些有意思的CSS标题,和层叠顺序。不断更新,不断更新,不断更新,主要的业务说一次。

层叠顺序【stacking order】

澳门葡京 4

image.png

可是上边图示的传教有部分不确切,根据 W3官方 的传道,准确的 7 层为:

  1. the background and borders of the element forming the stacking
    context.
  2. the child stacking contexts with negative stack levels (most
    negative first).
  3. the in-flow, non-inline-level, non-positioned descendants.
  4. the non-positioned floats.
  5. the in-flow, inline-level, non-positioned descendants, including
    inline tables and inline blocks.
  6. the child stacking contexts with stack level 0 and the positioned
    descendants with stack level 0.
  7. the child stacking contexts with positive stack levels (least
    positive first).

翻译过来是:

  1. 变异层叠上下文环境的成分的背景与边框
  2. 装有负 z-index 的子堆叠上下文成分 (负的越高越堆叠层级越低)
  3. 不奇怪流式布局,非 inline-block,无 position
    定位(static除外)的子成分
  4. 无 position 定位(static除外)的 float 浮动成分
  5. 符合规律流式布局, inline-block成分,无 position
    定位(static除外)的子成分(包括 display:table 和 display:inline )
  6. 抱有 z-index:0 的子堆叠上下文成分
  7. 全体正 z-index: 的子堆叠上下文元素(正的越低越堆叠层级越低)

关于笔者:chokcoco

澳门葡京 5

经不住大运似水,逃可是此间少年。

个人主页 ·
作者的篇章 ·
63 ·
   

澳门葡京 6

议论一些诙谐的CSS标题(一)–
右侧竖条的落实形式

议论一些妙趣横生的CSS标题(一)–
左侧竖条的落到实处格局

层叠准则:

  1. 层叠上下文的档次比日常成分高。
  2. 当成分的层叠水平一致、层叠顺序相同的时候,在DOM流中处于末端的要素会覆盖前面的要素。
  3. 层叠上下文内部嵌套的子成分均受父成分影响。
  4. 层叠上下文不会影响兄弟元素,只会潜移默化后代成分。
  5. 在同一层叠水平上时,有拨云见日的z-index值,则值越大,哪个人在上。
  6. 行使了css3属性的时候,层叠顺序是跟z-index:auto/z-index:0是均等的,当他俩发生层叠的时候,坚守的是“青出于蓝”准则。

注意:

  1. 平时成分的层叠水平优先由层叠上下文决定,由此,层叠水平的相比唯有在此时此刻层叠上下文成分中才有含义。
  2. 如若父成分没有成立层叠上下文的时候,子成分没有受父成分的限定,父子成分是地处同一层叠水平,相比较时索要按上边的7层举办比较。
  3. 只设置了position:absolute/relative是不会创制层叠上下文的,此时的div是三个一般性成分。
  4. position:fixed在chrome等较高级浏览器中,固然设置为z-index:auto也会成立层叠上下文。

座谈一些幽默的CSS标题(二)–
从条纹边框的完成谈盒子模型

议论一些好玩的CSS题目(二)–
从条纹边框的完结谈盒子模型

层叠上下文的始建

以下摘自
MDN:

  • 根元素 (HTML)
  • z-index为数值的固定成分
  • css3的属性
    1. 1个 z-index 值不为 “auto”的 flex 项目 (flex
      item),其子成分为层叠上下文成分
    2. opacity 属性值小于 1 的因素
    3. transform 属性值不为 “none”的成分
    4. mix-blend-mode 属性值不为 “normal”的成分
    5. filter值不为“none”的元素
    6. perspective值不为“none”的元素
    7. isolation 属性被装置为 “isolate”的要素
    8. position: fixed
    9. 在 will-change 中内定了任意 CSS
      属性,尽管你未曾平昔内定那一个属性的值
    10. -webkit-overflow-scrolling 属性被装置 “touch”的要素

有着标题汇总在本身的 Github 。

抱有标题汇总在自作者的 Github 。

demo

  1. 7阶层叠顺序
    html

<div class="one">one —— z-index为负值</div>
<div class="two">two —— block块状水平盒子</div>
<div class="three">three —— 浮动盒子</div>
<div class="four">four —— inline/inline-block水平盒子</div>
<div class="five">five —— z-index:auto/z-index:0</div>
<div class="six">six —— z-index为正值</div>

css

.one,.two,.three,.four,.five,.six{
      width: 200px;
      height: 200px;
}
.one{
      position: absolute;
      z-index: -1;
      background: #8874c1;
}
.two{
      background: #4f6fc1;
      margin-left: 100px;
}
.three{
      float: left;
      background: #51cd8d;
      margin-top: -100px;
}
.four{
     display: inline-block;
     background: #9cd262;
     margin-left: -100px;
}
.five{
     position: absolute;
     background: #d9ac4c;
     margin-top: -130px;
     margin-left: 50px;
}
.six{
    position: absolute;
    z-index: 1;
    background: #d93953;
    margin-top: -50px;
    margin-left: 150px;
}

效果图:注意inline/inline-block的要素层级是高于float成分的,因为inline/inline-block是内容突显,所以层级相比较高

澳门葡京 7

image.png

  1. 当使用了css3属性之后的7阶层叠顺序

html

<div class="one">one —— z-index为负值</div>
<div class="two">two —— block块状水平盒子</div>
<div class="three">three —— 浮动盒子</div>
<div class="four">four —— inline/inline-block水平盒子</div>
<div class="five">five —— z-index:auto/z-index:0</div>
<div class="five-2">opacity</div>
<div class="five-3">transform</div>
<div class="five-4">mix-blend-mode</div>
<div class="five-5">filter</div>
<div class="five-6">isolation:isolate</div>
<div class="five-7">will-change</div>
<div class="five-1">
    <div class="five-1-sub">flex子元素</div>
</div>
<div class="six">six —— z-index为正值</div>

css

.one, .two, .three,
.four, .five,.six {
    width: 200px;
     height: 100px;
}
.one {
     position: absolute;
     z-index: -1;
     background: #8874c1;
}
.two {
      background: #4f6fc1;
      margin-left: 100px;
}
.three {
      float: left;
      background: #51cd8d;
      margin-top: -50px;
}
.four {
      display: inline-block;
      background: #9cd262;
      margin-left: -100px;
      margin-top: -30px;
}
.five {
      position: absolute;
      background: #d9ac4c;
      margin-top: -60px;
      margin-left: 50px;
}
.six {
      position: absolute;
      z-index: 1;
      background: #d93953;
      margin-top: -100px;
      margin-left: 100px;
}
.five-1,.five-2, .five-3,
.five-4,.five-5,.five-6,
.five-7 {
      width: 200px;
      height: 100px;
}
.five-1 {
      display: flex;
      margin-top: -20px;
      background: pink;
}
.five-1-sub {
       background: blueviolet;
       z-index: 1;
}
.five-2{
       opacity: 0.9;
       background: red;
       margin-top: -15px;
}
.five-3 {
      transform: rotate(15deg);
      background: #8484f1;
      margin-top: -30px;
}
.five-4 {
     mix-blend-mode: darken;
     background: #ec57f9;
     margin-top: -50px;
}
.five-5 {
     filter: blur(1px);
     background: #3a64d4;
     margin-top: -40px;
}
.five-6 {
    isolation: isolate;
    background: #b18017;
    margin-top: -40px;
}
.five-7 {
     background: #73c1bc;
     will-change: transform;
     margin-top: -40px;
}

职能图:可以一目驾驭看出,css3属性造成的层叠上下文跟z-index:auto同一个层级,并且按照“后来居上”原则

澳门葡京 8

image.png

  1. 当成分的层叠水平同样、层叠顺序相同的时候,在DOM流中居于末端的成分会覆盖前面的因素。
    html

<div class="one">
     one
     <div class="one-sub">
           one-sub
     </div>
</div>
<div class="two">
       two
</div>

css

.one,.two,.one-sub{
     width: 200px;
     height: 200px;
}
.one{
    position: absolute;
    z-index: 5;
    background: red;
}
.one-sub{
    position: absolute;
    z-index: 100; // 设多高都没用
    background: purple;
}
.two{
    position: absolute;
    left: 100px;
    z-index: 5;
    background: orange;
}

成效图: 可以看到同层级的 two 是覆盖了 one
的,而one中的子成分one-sub无论z-index层级设置多高,都是不大概覆盖 two 的

澳门葡京 9

image.png

  1. 远在层叠上下文内部嵌套的子成分均受父成分影响。
    html

.one{
     position: absolute;
     background: red;
     width: 400px;
     height: 200px;
     /* z-index: 100; */  // 不加效果为图一,加了效果为图二
}
.two{
     position: absolute;
     z-index: 2;
     width: 200px;
     height: 200px;
     background: orange;
}
.three{
     position: absolute;
     z-index: -1;
     width: 200px;
     height: 400px;
     left: 100px;
     background: plum;
 }

css

<div class="one">
     <div class="two">two</div>
     <div class="three">three</div>
</div>

效果图:

  1. 图一:one仅仅设置了position:absolute/relative;
    没有设置z-index值的时候,z-index:私行认同为auto;此时不会成立层叠上下文。所以那时one是通常成分,比它的子成分three的层级要高
  2. 图二:当one设置了层级之后,此时one已经创建了层叠上下文,此时one里面的子成分受制one,意思就是,one的子成分层级永远比one要高。

专注:chrome等较高级浏览器中,position:fixed;纵然设置为z-index:auto也会创设层叠上下文。所以图一的代码,将absolute改成fixed,也会出现图二的功用。

澳门葡京 10

image.png

 

 

css3属性介绍

1. mix-blend-mode 错落情势 – 用css就能达成ps中的混合情势

html

<div class="img1">
        <h2>变化看这里变化看这里变化看这里变化看这里</h2>
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1436948145,4270509323&fm=200&gp=0.jpg">
</div>

css

.img1{
     position: relative;
}
h2{
     position: absolute;
     left: 0;
     top: 0;
     mix-blend-mode: soft-light;  // 有多种值可选
}

澳门葡京 11

image.png

具体可看以下介绍:
mix-blend-mode
MDN
CSS3混合形式mix-blend-mode/background-blend-mode简介

2. isolation — 隔离mix-blend-mode成分的因陋就简

  1. isolation属性定义该因素是不是必须创立一个新的层叠上下文stacking
    context,从而阻断混合形式。
  2. 假诺元素得以成立层叠上下文,就足以阻断mix-blend-mode

现实可看以下介绍:
isolation
MDN
精通CSS3 isolation:
isolate的变现和作用

3. filter — 滤镜效果

澳门葡京 ,html

<div class="img1">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1436948145,4270509323&fm=200&gp=0.jpg">
</div>

css

.img1{
     position: relative;
     filter: blur(5px); //  有多种值可选
}

澳门葡京 12

image.png

切实可看以下介绍:
filter
MDN

  1. will-change
  2. -webkit-overflow-scrolling

PS:附赠一道笔试标题,可以试一下是不是能回答。

题材:写出从上到下的层叠顺序,例如.one .two .four …
答案:见文末。

html

<div class="one">
    <div class="two"></div>
    <div class="three"></div>
</div>

<div class="four">
    <div class="five"></div>
    <div class="six"></div>
</div>

css

.one{
    position:relative;
    z-index:2;
    .two{
        z-index: 6;
    }
    .three{
        position: absolute;
        z-index: 5;
    }
}

.four{
    position:absolute;
    .five{}
    .six{
        position: absolute;
        left:0;
        top:0;
        z-index: -1;
    }
}

本文案例可以在
css-stacking-context
中下载查看。

参考自:
深入明白CSS中的层叠上下文和层叠顺序
层叠上下文【stacking context】与层叠顺序【stacking
order】
层叠顺序与堆栈上下文知多少

答案:three two one five four six
解析:

  1. one 和 four是同级成分,由于
    one是z-index数值为正的固化成分,所以one的层级比four高
  2. 既然one已经创办了层叠上下文,那么它的子成分就会受限于它,接下去分析一下内部的子成分。two只是安装了z-index,并不曾创立层叠上下文,所以是平时成分,three是z-index为正在的固化成分,所以three层级比two高。如今得出的定论是three、
    two、 one。
  3. 接下去看four,因为four只设置了永恒,没有安装z-index,所以暗许是auto,所以four是从未创立层叠上下文的,four是常常成分,也等于block块级水平盒子的层级。
  4. five没有安装任何样式,那么她是处在block块级水平盒子的层级,基于后发先至的规格,five层级要比four要高,而six是z-index为负值的原则性元素,所以是居于z-index负值的层级,所以得出的结论就是five
    、four、 six。
  5. 进展一下排序就是three、 two、 one 、five、 four 、six。

澳门葡京 13

image.png

三 、层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?

z-index 看上去其实很粗略,依据 z-index 的高低决定层叠的优先级,实则深刻进去,会意识内有乾坤。

探望下边那题,定义八个 div A
和 B,被总结在同3个父 div 标签下。HTML结构如下:

<div class="container">
    <div class="inline-block">#divA display:inline-block</div>
    <div class="float"> #divB float:left</div>
</div>

它们的 CSS 定义如下:

.container{
    position:relative;
    background:#ddd;
}
.container > div{
    width:200px;
    height:200px;
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

粗粗讲述起来,意思就是兼备共同父容器的两个DIV
重叠在一块儿,是 display:inline-block 叠在上面,照旧float:left 叠在上头?

注意那里
DOM
的依次,是读书人成 display:inline-block ,再生成 float:left 。当然也可以把五个的
DOM 顺序调转如下:

<div class="container">
    <div class="float"> #divB float:left</div>
    <div class="inline-block">#divA display:inline-block</div>
</div>

会发觉,无论顺序怎样,始终是 display:inline-block 的 div 叠在下面。

Demo戳我。

那边实在是事关了所谓的层叠水平(stacking
level),有一张图可以很好的诠释:

澳门葡京 14

拔取上图的逻辑,上边的标题就消除,inline-blcok 的 stacking level 比之 float 要高,所以无论是
DOM 的先后顺序都堆叠在上头。

唯独上边图示的布道有一部分不可信赖,依照 W3官方 的说法,准确的
7 层为:

  1. #### the background and borders of the element forming the stacking context.

  2. #### the child stacking contexts with negative stack levels (most negative first).

  3. #### the in-flow, non-inline-level, non-positioned descendants.

  4. #### the non-positioned floats.

  5. #### the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

  6. #### the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

  7. #### the child stacking contexts with positive stack levels (least positive first).

稍许翻译一下:

  1. #### 形成堆叠上下文环境的因素的背景与边框

  2. #### 拥有负 z-index 的子堆叠上下文元素 (负的越高越堆叠层级越低)

  3. #### 平常流式布局,非 inline-block,无 position 定位(static除外)的子成分

  4. #### 无 position 定位(static除外)的 float 浮动成分

  5. #### 不荒谬流式布局, inline-block元素,无 position 定位(static除外)的子元素(包涵 display:table 和 display:inline )

  6. #### 拥有 z-index:0 的子堆叠上下文成分

  7. #### 拥有正 z-index: 的子堆叠上下文成分(正的越低越堆叠层级越低)

于是我们的三个 div 的相比是依照上边所列出来的
4 和 5 。5 的 stacking level 更高,所以叠得更高。

唯独!不过!可是!重点来了,请留意,下边的相比较是依照多个 div 都没有变异 堆叠上下文 那一个为根基的。上面我们修改一下题材,给七个 div ,增加一个 opacity:

.container{
    position:relative;
    background:#ddd;
}
.container > div{
    width:200px;
    height:200px;
    opacity:0.9; // 注意这里,增加一个 opacity
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

Demo戳我。

会看到,inline-block 的 div 不再一定叠在 float 的 div 之上,而是和
HTML 代码中 DOM 的堆积顺序有关,后添加的 div 会 叠在先添加的 div
之上。

此间的关键点在于,添加的 opacity:0.9 那些让多少个div
都生成了 stacking context(堆叠上下文) 的定义。此时,要对双边举办层叠排列,就须求z-index ,z-index 越高的层叠层级越高。

堆叠上下文是HTML成分的三维概念,那么些HTML成分在一条假想的相对于面向(电脑显示屏的)视窗大概网页的用户的
z 轴上延伸,HTML
成分依据其自我性质根据事先级依次占用层叠上下文的半空中。

那么,如何触发3个因素形成 堆叠上下文 ?方法如下,摘自 MDN:

  • 根元素
    (HTML),
  • z-index
    值不为 “auto”的 相对/相对固化,
  • 一个
    z-index 值不为 “auto”的 flex 项目 (flex item),即:父元素 display:
    flex|inline-flex,
  • opacity
    属性值小于 1 的要素(参考 the specification for opacity),
  • transform
    属性值不为 “none”的要素,
  • mix-blend-mode
    属性值不为 “normal”的因素,
  • filter值不为“none”的元素,
  • perspective值不为“none”的元素,
  • isolation
    属性被设置为 “isolate”的因素,
  • position:
    fixed

  • will-change 中内定了任意 CSS
    属性,尽管你从未一直钦定那几个属性的值
  • -webkit-overflow-scrolling
    属性被设置 “touch”的因素

所以,上边大家给五个div 添加 opacity 属性的目标就是为着形成 stacking context。相当于说添加
opacity 替换到下边列出来这几个属性都是可以达到相同的效果。

在层叠上下文中,其子成分同样也如约上面表明的规则进行层叠。
尤其值得一提的是,其子成分的 z-index
值只在父级层叠上下文中有意义。意思就是父元素的 z-index 低于父成分另三个同级成分,子元素 z-index再高也没用。

通晓地点的 stacking-level 与 stacking-context 是通晓CSS 的层叠顺序的重中之重。

 

富有标题汇总在自作者的 Github ,发到博客希望赢得越多的互换。

到此本文截至,固然还有何样难点依旧提出,可以多多交换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

③ 、层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?

z-index 看上去其实很粗略,依据 z-index 的高低决定层叠的优先级,实则深入进去,会意识内有乾坤。

探望上边那题,定义七个 div A
和 B,被归纳在同七个父 div 标签下。HTML结构如下:

<div class="container">
    <div class="inline-block">#divA display:inline-block</div>
    <div class="float"> #divB float:left</div>
</div>

它们的 CSS 定义如下:

.container{
    position:relative;
    background:#ddd;
}
.container > div{
    width:200px;
    height:200px;
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

大致讲述起来,意思就是兼备一块父容器的多少个DIV
重叠在共同,是 display:inline-block 叠在上头,照旧float:left 叠在上边?

注意那里
DOM
的依次,是文人成 display:inline-block ,再生成 float:left 。当然也得以把多个的
DOM 顺序调转如下:

<div class="container">
    <div class="float"> #divB float:left</div>
    <div class="inline-block">#divA display:inline-block</div>
</div>

会发现,无论顺序如何,始终是 display:inline-block 的 div 叠在上方。

Demo戳我。

那里实在是涉及了所谓的层叠水平(stacking
level),有一张图可以很好的笺注:

澳门葡京 15

行使上图的逻辑,上边的标题就缓解,inline-blcok 的 stacking level 比之 float 要高,所以不管
DOM 的先后顺序都堆叠在上头。

可是下面图示的传道有局地不纯粹,按照 W3官方 的说法,准确的
7 层为:

  1. #### the background and borders of the element forming the stacking context.

  2. #### the child stacking contexts with negative stack levels (most negative first).

  3. #### the in-flow, non-inline-level, non-positioned descendants.

  4. #### the non-positioned floats.

  5. #### the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

  6. #### the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

  7. #### the child stacking contexts with positive stack levels (least positive first).

多少翻译一下:

  1. #### 形成堆叠上下文环境的因素的背景与边框

  2. #### 拥有负 z-index 的子堆叠上下文成分 (负的越高越堆叠层级越低)

  3. #### 不荒谬流式布局,非 inline-block,无 position 定位(static除外)的子成分

  4. #### 无 position 定位(static除外)的 float 浮动元素

  5. #### 平常流式布局, inline-block元素,无 position 定位(static除外)的子成分(包涵 display:table 和 display:inline )

  6. #### 拥有 z-index:0 的子堆叠上下文成分

  7. #### 拥有正 z-index: 的子堆叠上下文成分(正的越低越堆叠层级越低)

从而我们的五个 div 的可比是依照上边所列出来的
4 和 5 。5 的 stacking level 更高,所以叠得更高。

但是!但是!但是!重点来了,请留心,上边的相比是依照七个 div 都尚未形成 堆叠上下文 那么些为底蕴的。上面我们修改一下难题,给七个 div ,伸张一个 opacity:

.container{
    position:relative;
    background:#ddd;
}
.container > div{
    width:200px;
    height:200px;
    opacity:0.9; // 注意这里,增加一个 opacity
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

Demo戳我。

会看到,inline-block 的 div 不再一定叠在 float 的 div 之上,而是和
HTML 代码中 DOM 的积聚顺序有关,后添加的 div 会 叠在先添加的 div
之上。

此间的关键点在于,添加的 opacity:0.9 这么些让七个div
都生成了 stacking context(堆叠上下文) 的定义。此时,要对双边进行层叠排列,就需求z-index ,z-index 越高的层叠层级越高。

堆叠上下文是HTML成分的三维概念,这么些HTML成分在一条假想的相对于面向(电脑显示屏的)视窗或许网页的用户的
z 轴上延伸,HTML
成分依照其自个儿性质依照事先级依次占用层叠上下文的上空。

那么,怎么着触发3个要素形成 堆叠上下文 ?方法如下,摘自 MDN:

  • 根元素
    (HTML),
  • z-index
    值不为 “auto”的 相对/绝对固化,
  • 一个
    z-index 值不为 “auto”的 flex 项目 (flex item),即:父元素 display:
    flex|inline-flex,
  • opacity
    属性值小于 1 的要素(参考 the specification for opacity),
  • transform
    属性值不为 “none”的因素,
  • mix-blend-mode
    属性值不为 “normal”的要素,
  • filter值不为“none”的元素,
  • perspective值不为“none”的元素,
  • isolation
    属性被设置为 “isolate”的因素,
  • position:
    fixed

  • will-change 中钦定了任意 CSS
    属性,即使你从未向来内定那么些属性的值
  • -webkit-overflow-scrolling
    属性被装置 “touch”的成分

由此,上边大家给多少个div 添加 opacity 属性的目标就是为着形成 stacking context。约等于说添加
opacity 替换到上边列出来这么些属性都以足以高达同等的法力。

在层叠上下文中,其子成分同样也依据上面表达的平整举行层叠。
尤其值得一提的是,其子成分的 z-index
值只在父级层叠上下文中有含义。意思就是父成分的 z-index 低于父元素另3个同级成分,子成分 z-index再高也没用。

接头地点的 stacking-level 与 stacking-context 是领略
CSS 的层叠顺序的严重性。

 

享有标题汇总在自家的 Github ,发到博客希望赢得更多的交换。

到此本文截止,若是还有啥样疑难依然提议,可以多多互换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website