Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

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

Error message here!

返回登录

Close

CSS中层叠和CSS的7阶层叠水平(上篇)

一只菜鸟攻城狮啊 2019-02-24 23:54:00 阅读数:233 评论数:0 点赞数:0 收藏数:0

今天搜索资料时,忽然发现了以前没注意的一个知识点,所以拖过来搞一搞,这个知识点叫做CSS的7阶层叠水平

在说这个知识之前,我们必须要先了解一个东西以便于我们更好的理解CSS的7阶层叠水平

这个东西就是z-index属性(此篇为上篇,仅仅讲z-index)

基本含义:

z-index通俗来说就是在Z轴上的索引,Z轴是垂直于电脑屏幕的一根轴

用来设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,即通常情况下,z-index为2的元素会在z-index为1的元素上面

取值情况:

z-index有三个取值

auto:默认。堆叠顺序与父元素相等。

number设置元素的堆叠顺序。

inherit:规定应该从父元素继承 z-index 属性的值。

特性:

 

1.支持负值(如果为正数,则离用户更近,为负数则表示离用户更远。)

 

2.支持CSS3 animation动画;(并没什么实用应用场景)

 

3.在CSS2.1时代,需要和定位元素配合使用,如果不考虑CSS3,只有定位元素(position:relative/absolute/fixed/sticky)的z-index才有作用!在CSS3中有例外

准则:

1.后来者居上原则

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> .a{ position: absolute; height: 400px; width: 400px; background-color: yellow;
} .b{ position: absolute; height:400px; width: 400px; background: red; margin-left: 100px; } </style> </head> <body> <div class="a"></div> <div class="b"></div> </body> </html>

运行结果:

 

解析:我们可以看到,红色作为后来的元素覆盖在之前的元素上了,在未设置z-index的前提下,后来元素会覆盖前面添加到元素,当然实在开启了绝对定位的前提下(不开启绝对定位不能直观的看到效果)

2.谁大谁先上原则

在.a添加z-index:2,在.b添加z-index:1

运行结果:

解析:通常情况下,z-index越大,层级越高,越在上面

 

当发生嵌套时,祖先优先原则

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.a{
position: absolute;
height: 400px;
width: 400px;
background-color: yellow;
z-index: 2;
}
.b{
position: absolute;
height:400px;
width: 400px;
background: red;
margin-left: 100px;
z-index: 1
}
.a1{
position: absolute;
height: 200px;
width: 200px;
background-color: aqua;
}
.b1{
position: absolute;
height: 200px;
width: 200px;
background-color: blue;
z-index: 100
}
</style>
</head>
<body>
<div class="a">
<div class="a1"></div>
</div>
<div class="b">
<div class="b1"></div>
</div>
</body>
</html>

 

运行结果:

 

解析:按照前面所说应该是蓝色的格子会在最上面,这里并没有,原因就是祖先优先原则

a的层级大于b的层级,所以a里面的元素会始终在b的上面,即使b的子元素的z-index为10000也没用

 

 

注意:

所有主流浏览器都支持 z-index 属性

任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

 

 

版权声明
本文为[一只菜鸟攻城狮啊]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/suihang/p/10428754.html

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

支付宝红包,每日可领