层级——z-index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>postion</title>
<style>
.box1{
width: 200px;
height: 200px;
background: red;
position:relative;
z-index: 2;
}
.box2{
width: 200px;
height: 200px;
background: yellow;
/*开启绝对定位*/
position:absolute;
/*设置偏移量*/
top:100px;
left:100px;
/*当定位元素的层级一样,则下边的元素会覆盖住上边的
* (这里说的上下是HTML里面的结构,box3在box2下边)
* 通过z-index属性可以用来设置元素的层级
* 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
* 层级越高，越优先显示
*
* 注意：对于没有开启定位的元素不能使用z-index
*
* 但是：父元素的层级再高,也不会盖住子元素的
* */
z-index: 1;
}
.box3{
width: 400px;
height: 400px;
background: green;
position:relative;
z-index: 3;
}
.box4{
width:200px;
height: 200px;
background-color: orange;
/*开启了相对定位*/
position:relative;
/*父元素的层级再高,也不会盖住子元素的*/
z-index:20;
}
.box5{
width: 100px;
height: 100px;
background-color: darkblue;
/*开启了绝对定位*/
position:absolute;
z-index:10;
}
.sp{
width: 500px;
height: 400px;
background: cyan;
position:fixed;
top:10px;
left:10px;
z-index: 100;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4">
<div class="box5"></div>
<span class="sp">我是一个span</span>
<div>
</body>
</html>
