这篇文章主要给大家分享关于CSS中层叠上下文的内容，本文对层叠上下文的概念、特性及使用都有详细的介绍，感兴趣的朋友可以参考，接下来跟随小编来学习一下吧。

在有些 CSS 相互影响作用下，对元素设置的 z-index 并不会按实际大小叠加，一直不明白其中的原理，最近特意查了一下相关资料，做一个小总结。

    层叠上下文与层叠顺序

    层叠上下文（stacking content）是 HTML 中的三维概念，也就是元素z轴。层叠顺序（stacking order）表示层叠时有着特定的垂直显示顺序。

    层叠准则

    谁大谁上

    当具有明显的层叠水平标示的时候，如识别的 z-indx 值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。

    后来居上

    当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

    层叠上下文的特性

    层叠上下文有以下特性：

• 层叠上下文的层叠水平要比普通元素高；
• 层叠上下文可以阻断元素的混合模式；
• 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文；
• 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需考虑后代元素；
• 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的叠层顺序中；

    z-index 值不是 auto 的时候，会创建层叠上下文

    对于包含 position: relative; position: absolute; 的定位元素，以及 FireFox/IE浏览器下包含 position声明定位的元素，当其 z-index 值不是 auto 的时候，会创建层叠上下文。

HTML 代码

<div  class="red-wrapper">
    <div  class="red">小红</div>
</div>
<div  class="gray-wrapper">
    <div  class="gray">小灰</div>
</div>

    CSS代码

.red-wrapper {
    position: relative;
    z-index: auto;
}

.red {
    position: absolute;
    z-index: 2;
    width: 300px;
    height: 200px;
    text-align: center;
    background-color: brown;
}

.gray-wrapper {
    position: relative;
    z-index: auto;
}  

.gray {
    position: relative;
    z-index: 1;
    width: 200px;
    height: 300px;
    text-align: center;
    background-color: gray;
}

    当两个兄弟元素 z-index 都为 auto 时，它们为普通元素，子元素遵循”谁大谁上“的原则，所以小灰 z-index: 1; 输给了小红的 z-index: 2;，被压在了下面

    然而当 z-index 变成数值时，就会创建一个层叠上下文，各个层叠元素相互独立，子元素受制于父元素的层叠顺序。将兄弟元素的 z-index 从 auto 变成了数值 0，他们的子元素的之间的层叠关系就不不受本身 z-index 的影响，而是由父级元素的 z-index 决定。

    下面小红和小灰的父级的 z-index 都调整成 0

.red-wrapper {
    /* 其他样式 */
    z-index: 0;
}  

.gray-wrapper {
    /* 其他样式 */
    z-index: 0;
}

    就会发现小灰在小红的上面了，因为小灰的父级和小红的父级都变成了层叠上下文元素，层叠级别一样，根据文档流中元素位置”后来居上“原则。

    CSS3对层叠上下文的影响

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

父级是 display: flex 或者 display: inline-flex;，子元素的 z-index 不是 auto，此时，这个子元素（注意这里是子元素）为层叠上下文元素。

    HTML 代码

<div  class="wrapper">
    <div  class="gray">
        小灰
        <div  class="red">小红</div>
    </div>
</div>

    CSS代码

.wrapper {
    display: flex;
}

.gray {
    z-index: 1;
    width: 200px;
    height: 300px;
    text-align: center;
    background-color: gray;
}  

.red {
    z-index: -1;
    width: 300px;
    height: 200px;
    text-align: center;
    background-color: brown;
    position: relative;
}

    这样，由于小灰的父级的 display: flex;，自身的 z-index 不为 auto，因此变成了层叠上下文元素，原本小红垫底变成了小灰垫底了。

    mix-blend-mode 与层叠上下文

具有 mix-blend-mode 属性的元素是层叠上下文元素

    CSS 属性mix-blend-mode（混合模式），可以将叠加的元素的内容和背景混合在一起。

    代码同上，只需在小灰上添加 mix-blend-mode 属性，为了能查看到混合效果，将外面容器增加一个背景图。

.wrapper {
    background-image: url("./jz.png");
}

.gray {
    /* 其他样式 */
    mix-blend-mode: darken;
}

    同理，小灰有 mix-blend-mode 属性，变成了层叠上下文元素，让小灰垫底。

    opacity 与层叠上下文

如果元素的 opacity 不为1，这个元素为层叠上下文元素

    HTML 代码

<div  class="gray">
    小灰
    <div  class="red">小红</div>
</div>

    CSS代码

.gray {
    z-index: 1;
    width: 200px;
    height: 300px;
    text-align: center;
    background-color: gray;
    opacity: 0.5;
}

.red {
    z-index: -1;
    width: 300px;
    height: 200px;
    text-align: center;
    background-color: brown;
    position: relative;
}

    由于小灰自身有 opacity 半透明属性，变成了层叠上下文元素，使得小红 z-index: -1;也无法穿透。

    transform 与层叠上下文

应用了 transform 的元素为层叠上下文元素

    代码同上，只不过把小灰应用 transform 变换。

.gray {
    /* 其他相关样式 */
    transform: rotate(30deg);
}

    同理，小灰应用 transform 变换，变成了层叠上下文元素，使得小红 z-index: -1;也无法穿透。

    filter 与层叠上下文

具有 filter 属性的元素是层叠上下文元素

    代码同上，只不过把小灰加上 filter 属性。

.gray {

    /* 其他相关样式 */
    filter: blur(5px);
}

    同理，小灰有 filter 属性，变成了层叠上下文元素，使得小红 z-index: -1; 还是在小灰上层。

    will-change 与层叠上下文

具有 will-change 属性的元素是层叠上下文元素

    代码同上，只不过把小灰加上 will-change 属性。

.gray {
    /* 其他相关样式 */
    filter: will-change;
}

    结果，同理如上。

    总结

    综合来看元素层叠规则，首先要理解在什么情况下元素是层叠上下文元素

• 含有定位属性 position: relative|absolute|fixed;，且 z-index 不为 auto（webkit 内核浏览器，fixed 定位无此限制）的元素是层叠上下文元素；
• 元素有一些 CSS3 属性，可以变成层叠上下文元素：
• 父级是 display: flex|inline-flex; 子元素的 z-index 不是 auto，此时，这个子元素（注意这里是子元素）为层叠上下文元素
• 具有 mix-blend-mode 属性的元素
• opacity 属性不为1的元素
• 有 transform 变换的元素
• 具有 filter 属性的元素
• 具有 will-change 属性的元素

    其次要理解叠层准则：”谁大谁上“，”后来居上“，最后就是要了解层叠上下文主要特性（详见文章层叠上下文的特性）。

    关于CSS中层叠上下文的内容就介绍到这，希望本文对大家了解和学习层叠上下文有帮助，想要了解更多层叠上下文的内容，大家可以关注其它相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS使用定位有几种情况，用法是怎样

  这篇文章主要介绍了深入学习CSS中如何使用定位(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• flexbox伸缩盒布局有哪些属性，含义是什么

  也就是因为这个flexbox伸缩盒布局太强大了，以至于我没在意它也是display的一个属性。要想解决这个布局问题，我们还是先了解一些基础的问题。先回顾下display有哪些属性吧：none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间inline：指定对象为内联元素。block：指定对象为块元素。list-i ...

• HTML块元素居中如何实现，有几种方式

  块元素位置居中有两种存在：一种是有两个块元素，其中一个块元素相对另外一个块元素居中；另外一种是一个块元素相对于顶级父容器居中 第一种实现方式如下： <html><head><metacharset="utf-8"/><title>测试</title><styletype=&q

• 用纯CSS写文本溢出截断省略效果怎么做，优缺点是什么

  这篇文章主要介绍了纯CSS实现“文本溢出截断省略”的几种方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• HTML页面中如何用css设置单词间距，方法是什么

  word-spacing属性用于设置HTML页面中标签或单词之间的距离。该属性对英语有效，但对中文无效。word-spacing属性值有三种类型，Normal、长度值和百分比。