CSS层叠上下文(z-index)

偶尔还会想起
124 阅读4分钟

1.什么是css层叠上下文

在介绍层叠上下文之前先介绍一下html的三维概念

平时我们从设备终端看到的HTML文档都是一个平面的，事实上HTML文档中的元素却是存在于三个维度中。除了大家熟悉的平面画布中的×轴和y轴，还有控制第三维度的z轴，同时具有x,y,z三个维度，x轴和y轴就不用多解释了，就是我们平时看到的平面上的两个维度，而z轴则可以理解为和我们视野垂直的方向 简单来说，层叠上下文,英文全称为stacking contexts，就是我们所说的z轴方向上的排列顺序

2.如何创建层叠上下文

  • html中的根元素就是一个最基本的层叠上下文，称为“根层叠上下文”
  • 普通元素设置position属性为非static值，设置z-index值，产生层叠上下文
  • css3的新属性也可以创建层叠上下文

3.层叠等级以及层叠顺序

除了层叠上下文，还需要了解两个概念，层叠等级和层叠顺序，两者都用来描述元素在层叠上下文上的排列顺序

层叠等级是一个概念，在同一个层叠上下文中，层叠等级越高，就越靠前，同时层叠等级是由具体的层叠顺序来决定的，如果不在同一个层叠上下文，就根据所处的层叠上下文的层叠规则来判断元素所处位置，下图是层叠顺序图

image.png

在开始实战之前，我们先将以上内容做一个总结

  • 首先判断两者是否处于同一个层叠上下文

    (1)如果处于同一个层叠上下文，那么根据元素的层叠等级，谁的大谁在上(参照层叠顺序表)

    (2)如果不处于同一个层叠上下文，判断所处的层叠上下文，谁的等级大谁在上

  • 如果两个元素层叠等级相同，层叠顺序相同，则根据dom渲染的先后顺序来判断，后渲染的在上面

4.实战练习

<div class="one">
    <div class="child1"></div>
</div> 
<div class="two">
    <div class="child2"></div>
</div>

<style>
.one,.two {
    position: relative;
}
.child1 {
    width: 100px;
    height: 200px;
    background-color: pink;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
.child2 {
    width: 200px;
    height: 100px;
    z-index: 0;
    position: absolute;
    left: 0;
    top: 0;
    background-color: blue;
}
<style>

.child1元素和.child2元素的父元素.one元素和.two元素虽然设置了position属性但并没有设置z-index值，所以.child1元素和.child2元素都处于body的层叠上下文，因此.child1元素会覆盖.child2元素，粉色覆盖蓝色，如下图左

image.png image.png

// 其他样式不变，给两个父元素添加z-index:1;
.one,.two {
    position: relative;
    z-index:1;
}

.child1元素和.child2元素的父元素.one元素和.two元素设置了position属性和z-index值，因此形成两个独立的层叠上下文，但两个元素的层叠等级相同，层叠顺序相等，所以根据渲染顺序.two元素在上，所以蓝色覆盖粉色，如上图右

<div class="box">
    <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.oPgyGnXUhCBr5APwEUkzFQHaEo?pid=ImgDet&rs=1" class="item" alt="">
</div>

.box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: pink;
    //z-index:999;
}
.item {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 100px;
    height: 100px;
    z-index: -1;
}

很显然当图片的z-index设置为-1时，他会位于box盒子的下方，如果给box添加一个z-index:999;的属性值后，图片是不是依然在box下面呢，让我们来试一试

image.pngimage.png

很显然，结果并不是我们想的那样，图片反而出现在了box盒子的上方，那究竟是怎么回事呢，首先当没有添加z-index属性时，由于box盒子并不会形成独立层叠上下文，因此此时img图片和box盒子都位于body层叠上下文上由于img的z-index属性为-1，因此img图片会在box盒子下面，当给box添加了z-index属性后，nox盒子形成了独立的层叠上下文，因为img在该层叠上下文上，所以图片会在box盒子上面显示

avatar
文章
阅读
粉丝