一, 前言
网页显示实际上是三维的, 我们直观看到的有 x 轴和 y 轴, 但在网页布局上还有一个 z 轴.
对于定位元素, 我们使用 top,right,left,bottom 来实现元素在 x-y 平面上的定位, 但为了表示布局的三维立体概念, 还引入了 z-index,z-index 属性用来设置元素的堆叠顺序, 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上方.
z-index 有三个参数:
auto: 默认值, 相当于未设置 z-index, 可看作 z-index: 0
number: 无单位数字, 用来设置 z-index 大小
inherit: 继承父元素的 z-index 属性值
举个小栗子热热身
- <div style="width: 100px; height: 100px; background-color: red; position: relative;"></div>
- <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>
第二个 div 向上移动 50px, 与第一个 div 产生了重叠部分, 显示情况如下:
第二个 div 显示在了第一个 div 上方, 也就是重叠部分第二个 div 遮住了第一个 div, 现在给第一个 div 添加 z-index 属性:
- <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 1;"></div>
- <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>
我们将第一个 div 的 z-index 属性设置为 1
这时我们发现第一个 div 遮住了第二个 div, 下面我们将逐步介绍定位元素属性 z-index.
二, z-index 只对定位元素奏效
定位元素 (position 属性值为 relative 或 absolute 或 fixed) 可以理解为具有 x,y,z 坐标的元素. 如果定位元素没有显示给出 z-index 属性, 那么它的 z-index 默认值为 0.
如果一个元素不是定位元素, 那给它设置 z-index 属性也是无效的.
栗子来了
- <div style="width: 100px; height: 100px; background-color: red; z-index: 5;"></div>
- <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px; z-index: 1;"></div>
第一个 div 的 z-index 设置为 5, 第二个 div 的 z-index 设置为 1
我们看到第二个 div 覆盖了第一个 div, 虽然第一个 div 的 z-index 属性值更大, 但它不是定位属性, 所以它的 z-index 不起作用.
三, 非定位元素与非定位元素, 以及相同 z-index 的堆叠顺序比较
如果两个元素都为非定位元素, 或者两个定位元素的 z-index 值相等, 那么按照文档流的顺序, 后写的元素将覆盖先写的元素.
两个栗子接住
1. 两个都未设置 z-index 的定位元素
- <div style="width: 100px; height: 100px; background-color: red; position: relative;"></div>
- <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px;"></div>
后写的这个 div(背景为 black)覆盖了先写的 div(背景为 red)
2. 两个非定位元素
- <div style="width: 100px; height: 100px; background-color: red;"></div>
- <div style="width: 100px; height: 100px; background-color: black; margin-top: -50px;"></div>
后写的这个 div(背景为 black)覆盖了先写的 div(背景为 red)
四, 定位元素与非定位元素的堆叠顺序
如果定位元素未设置 z-index 或者 z-index 为正数, 那么此类该定位元素的堆叠顺序大于非定位元素; 如果定位元素 z-index 为负数, 那么此类定位元素堆叠顺序小于非定位元素.
栗如
第一个定位元素 div 的 z-index 为正数, 第二个为非定位元素 div, 第一个定位元素 div 的 z-index 为负数
- <div style="width: 100px; height: 100px; background-color: green; position: relative; top: 50px; z-index: 1"></div>
- <div style="width: 100px; height: 100px; background-color: red;"></div>
- <div style="width: 100px; height: 100px; background-color: black; position: relative; top: -50px; z-index: -1;"></div>
z-index 为正数的定位元素覆盖了非定位元素, 非定位元素覆盖了 z-index 为负数的定位元素
五, 父子及兄弟的堆叠顺序
1. 如果父元素设置了 z-index 且不是默认值 auto, 无论子元素的 z-index 为何值, 子元素堆叠顺序永远大于其父元素;
- <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px; z-index: 100">
- <div style="width: 100px; height: 100px; background-color: blue; position: relative; z-index: -10;"></div>
- </div>
虽然子 div 的 z-index 值小于其父 div, 但子 div 仍显示在了父 div 的上方
2. 如果父元素未设置 z-index 或值为 auto, 那么当子元素 z-index 为负数时, 父元素堆叠顺序将大于子元素, 否则子元素堆叠顺序大于父元素
- <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px;">
- <div style="width: 100px; height: 100px; background-color: blue; position: relative; z-index: -1;"></div>
- </div>
父元素未设置 z-index, 子元素 z-index 为 - 1, 可以看到子元素被父元素覆盖了
3. 无论父元素的 z-index 如何, 兄弟元素间的 z-index 值都可相互比较, z-index 值越大堆叠顺序越高
- <div style="width: 200px; height: 200px; background-color: green; position: relative; top: 50px;">
- <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 2;"></div>
- <div style="width: 100px; height: 100px; background-color: black; position: relative; z-index: 1; top: -50px;"></div>
- </div>
第一个子元素的 z-index 大于第二个子元素的 z-index, 所以第一个子元素覆盖第二个子元素
3. 对于父元素及兄弟元素之外的其它元素, 子元素的堆叠顺序由其父元素的 z-index 决定.
- <div style="position: relative; z-index: 10;">
- <div style="width: 100px; height: 100px; background-color: red; position: relative; z-index: 2;"></div>
- </div>
- <div style="position: relative; z-index: 5;">
- <div style="width: 100px; height: 100px; background-color: black; position: relative; z-index: 3; top: -50px;"></div>
- </div>
尽管背景为红色的子 div 元素 z-index 小于背景为黑色的子 div 元素, 但红色仍覆盖了黑色, 就是因为红色 div 的父元素 z-index 大于黑色 div 的父元素
所以无论黑色子 div 的 z-index 多大, 它的堆叠顺序始终小于红色 div
六, 最后
感谢博主谦行的博客: z-index 应用简单总结.
如有错误或不足之处还望指出探讨, 十分感谢!
来源: https://www.cnblogs.com/huwt/p/10439415.html