手记

自学 CSS 之 z-index 属性

个人学习笔记,谨慎参考!


整理自慕课网,张鑫旭老师的课程 https://www.imooc.com/video/11629

z-index:用来设置元素的堆叠顺序,就像三维坐标的 z 轴,垂直于屏幕。

  • 祖先优先,后来居上原则。

测试代码

.html

    <div class="father1">
      <div class="son1"></div>
    </div>

    <div class="father2">
      <div class="son2"></div>
    </div>

.css

.father1{
  left: 100px;
  width: 200px; height: 200px;
  background: #00cccc;
  position: absolute;
  z-index: 1;
}

.son1{
  background: #008cc8;
  width: 180px; height: 180px;
  position: absolute;
  z-index: 2;
}

.father2{
  left: 120px; top: 10px;
  width: 200px; height: 200px;
  background: #ff6633;
  position: relative;
  z-index: 1;
}

.son2{
  background: #ff9933;
  width: 180px; height: 180px;
  position: relative;
  z-index: 1;
}
  1. father1 -> z-index: 1;son1 -> z-index: 2;

  2. father2 -> z-index: 1;son2 -> z-index: 1;

按照祖先优先,后来居上的原则,祖先元素 z-index 属性相同时,不看子元素的 z-index,同时遵守后来居上原则,则 2 排布于 1 之上。

更改代码为

  1. father1 -> z-index: 2;son1 -> z-index: 1;

  2. father2 -> z-index: 1;son2 -> z-index: 2;

  • 7阶层叠水平

元素按照该图的层叠顺序排布。页面的根元素天生具有层叠上下文。


参与层叠上下文,元素才有 z-index 属性的默认值为 auto,然后可参照层叠顺序表。

z-index 层叠上下文 三个要点

是不是可以理解成参与层叠上下文不代表创建了层叠上下文,设定 z-index的值后才算是创建了呢?


定位之后是 z-index 的值是auto;当定位元素的 z-index 不是 auto 的时候就会创建层叠上下文。

opacity 不为 1 是层叠上下文元素,z-index:atuo; 和 absolute 一样,所以后来居上。
opacity 为 1 是普通元素,因为文字是绝对定位,所以位于上方。

1人推荐
随时随地看视频
慕课网APP