分享程序员开发的那些事...
更新时间：2022-09-07 23:13:43
开发者学堂课程【CSS 快速掌握：z-index 属性】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9204
内容介绍
一、z-index
Ø z-index 表示谁压盖着谁，数值大的会压盖住数值小的
Ø 只有定位的元素才有 z-index 值 只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有 z-index
Ø z-index 的值是没有单位的,值是一个正整数,默认的 z-index 的值是0
Ø 如果定位元素没有设置 z-index 属性或者 z-index 值设置一样,那么写在 HTML 后面的定位前面的定位元素
.divi 与都设置了绝对定位,所以它们就拥有了 z-index 属性,但是并没有给其设置 z-index 属性。没有设置 z-index 属性那么它们的值就为0
我们要观察 HTML 中的结构 .div1 这个元素它写在 .div2 的后面然后就能知道 .div1 这个元素就会压盖住 .div2
< !DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z- index</title>
<style type="text/css">
div{
width: 200px;
height: 200px
}
. div1{
Background-color:#f00
/*绝对定位*/
position: absolute;
/*定位的坐标*/
left: 100px;
top: 100px;
}
.div2{
background-color: #00f ;
/*绝对定位*/
position: absolute ;
/*定位的坐标*/
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div class="div2"></div>
<div class=" div1"></div>
</body>
都有设置 z-index 属性
例2
< !DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z- index</title>
<style type="text/css">
div{
width: 200px;
height: 200px
}
. div1{
Background-color:#f00
/*绝对定位*/
position: absolute;
/*定位的坐标*/
left: 100px;
top: 100px;
z-index:2
}
.div2{
background-color: #00f ;
/*绝对定位*/
position: absolute ;
/*定位的坐标*/
left: 200px;
top: 200px;
z-index:3
}
</style>
</head>
<body>
<div class="div2"></div>
<div class=" div1"></div>
</body>
divi 与 .div2 它们都设置了绝对定位属性所它们就拥有了 z-index 属性 .div1 与 .div2 都设置了 z-index 属性值值大的会压盖值小的 .div2 的值比 .div1 的值要大那么 .div2 就会压善住 .div1 元素
例3
<style>
*{
margin:0；
padding:0；
}
.nav{
width:100%；
height:60px；
background-color：#222222；
/*使用固定定位*/
position:fixed；
left:0px;
top:0px：
z-index：9999999999；
}
.nav .inner _c{
width:1000px；
height:60px；
margin:0px auto；
}