层叠顺序与堆栈上下文知多少,css层叠上下文
分类:前端技术

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

2016/09/29 · CSS · CSS

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。

解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧。

不断更新,不断更新,不断更新,重要的事情说三遍。

谈谈一些有趣的CSS题目(1): 左边竖条的实现方法

谈谈一些有趣的CSS题目(2): 从条纹边框的实现谈盒子模型

所有题目汇总在我的 Github 。

开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节。

层叠上下文【stacking context】

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

层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
z轴即用户与屏幕间看不见的垂直线。

3、层叠顺序(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 ,增加一个 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 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

那么,如何触发一个元素形成 堆叠上下文 ?方法如下,摘自 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 属性,赶紧去补习一下吧。

层叠水平【stacking level】

层叠水平顺序决定了同一个层叠上下文中元素在z轴上的显示顺序

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 2 图片 3

1 赞 3 收藏 评论

不断更新,不断更新,不断更新,重要的事情说三遍。

层叠顺序【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题目(一)-- 左边竖条的实现方法

层叠准则:

  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题目(二)-- 从条纹边框的实现谈盒子模型

层叠上下文的创建

以下摘自 MDN:

  • 根元素 (HTML)
  • z-index为数值的定位元素
  • css3的属性
    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 。

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

3、层叠顺序(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),有一张图可以很好的诠释:

图片 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 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

那么,如何触发一个元素形成 堆叠上下文 ?方法如下,摘自 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 ,发到博客希望得到更多的交流。

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

本文由pc28.am发布于前端技术,转载请注明出处:层叠顺序与堆栈上下文知多少,css层叠上下文

上一篇:文字描述,jquery实现导航菜单 下一篇:没有了
猜你喜欢
热门排行
精彩图文