Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

CSS学习笔记之z-index属性

路漫漫我不畏 2019-02-27 15:30:00 阅读数:153 评论数:0 点赞数:0 收藏数:0

一、前言

 

网页显示实际上是三维的,我们直观看到的有x轴和y轴,但在网页布局上还有一个z轴。

对于定位元素,我们使用top、right、left、bottom来实现元素在x-y平面上的定位,但为了表示布局的三维立体概念,还引入了z-index,z-index属性用来设置元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上方。

z-index有三个参数:

  1. auto:默认值,相当于未设置z-index,可看作z-index: 0
  2. number:无单位数字,用来设置z-index大小
  3. 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

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领