前端面试之层叠上下文(z-index)

时间 2019-11-16

标签前端面试层叠上下文 index 栏目快乐工作繁體版

原文原文链接

什么是层叠上下文

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

因此一个页面中每每不单单只有一个层叠上下文(由于有不少种方式能够生成层叠上下文)，在一个层叠上下文内，咱们按照层叠水平的规则来堆叠元素。html

咱们能够把触发层叠上下文的条件分为三大类:web

默认建立层叠上下文

根元素html

这就是为何，绝对定位元素在left/top等值定位的时候，若是没有其余定位元素限制，会相对浏览器窗口定位的缘由。浏览器

须要配合 z-index 触发建立层叠上下文

z-index 值不为 "auto"的绝对/相对/绝对定位,会建立层叠上下文

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .container {
        background: pink;
        height: 100vh;
    }
    .box {
        width: 160px;
    }
    .box1 {
        position: relative;
        left: 0;
        top: 0;
        z-index: 1;
        background: blue;
        height: 160px;
    }
    .box2 {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        background: gray;
        height: 180px;
    }
    .box3 {
        position: fixed;
        z-index: 0;
        background: greenyellow;
        left: 0;
        top: 0;
        height: 200px;
    }
    .box4 {
        height: 220px;
        background: orange;
    }
</style>
 <div class="container">
    <div class="box1 box">相对定位, z-index: 1</div>
    <div class="box2 box">绝对定位, z-index: -1</div>
    <div class="box3 box">固定定位, z-index: 0</div>
    <div class="box4 box">普通元素</div>
</div>
复制代码

flex 项(父元素 display 为 flex|inline-flex)，注意是子元素，不是父元素建立层叠上下文

<style>
* {
    margin: 0;
    padding: 0;
}
.box { display: flex; background: pink;}
.box > div { background-color: blue; z-index: 1; }    /* 此时该div是层叠上下文元素，同时z-index生效 */
.box > div > img {
    position: relative; z-index: -1; right: -150px;     /* 注意这里是负值z-index */
}
</style>

 <div class="box">
    <div>
        <img src="mm.png">
    </div>
</div>
复制代码

flex 项(父元素 display 为 flex|inline-flex)，注意是子元素，不是父元素建立层叠上下文

不须要配合 z-index 触发建立层叠上下文

这种状况下，基本上都是由 CSS3 中新增的属性来触发的。bash

opacity 属性值小于 1 的元素,会触发z-index

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box { background-color: blue; opacity: 0.5;  }

    .box>img {
        position: relative;
        z-index: -1;
        right: -150px;
    }
</style>
 <div class="box">
    <img src="mm.png">
</div>
复制代码

transform 属性值不为 "none"的元素

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        background-color: blue;
        transform: rotate(15deg);
    }

    .box>img {
        position: relative;
        z-index: -1;
        right: -150px;
    }
</style>
<div class="box">
    <img src="mm.png">
</div>
复制代码

mix-blend-mode 属性值不为 "normal"的元素

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        background-color: blue;
        mix-blend-mode: darken;
    }

    .box>img {
        position: relative;
        z-index: -1;
        right: -150px;
    }
</style>
<div class="box">
    <img src="mm.png">
</div>
复制代码

perspective值不为“none”的元素

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        background-color: blue;
        perspective: 250px;
    }

    .box>img {
        position: relative;
        z-index: -1;
        right: -150px;
    }
</style>
 <div class="box">
    <img src="mm.png">
</div>
复制代码

filter与层叠上下文

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        background-color: blue;
        filter: blur(5px);
    }

    .box>img {
        position: relative;
        z-index: -1;
        right: -150px;
    }
</style>
 <div class="box">
    <img src="mm.png">
</div>
复制代码

isolation 属性被设置为 "isolate"的元素
在 will-change 中指定了任意 CSS 属性，即使你没有直接指定这些属性的值
-webkit-overflow-scrolling 属性被设置 "touch"的元素

什么是层叠水平

一个 DOM 元素，在不考虑层叠上下文的状况下，会按照层叠水平决定元素在 z 轴上的显示顺序，通俗易懂地讲，不一样的 DOM 元素组合在一块儿发生重叠的时候，它们的的显示顺序会遵循层叠水平的规则，而 z-index 是用来调整某个元素显示顺序，使该元素可以上浮下沉。ide

- 在同一层叠上下文中，层叠水平才有意义
- z-index的优先级最高
复制代码

比较两个DOM元素显示顺序

若是是在相同的层叠上下文，按照层叠水平的规则来显示元素
若是是在不一样的层叠上下文中，先找到共同的祖先层叠上下文，而后比较共同层叠上下文下这个两个元素所在的局部层叠上下文的层叠水平。