元素定位:position
属性值:(1)static 默认值 没有定位 静态定位
- relative 相对定位:相对于自己原位置定位,定位后原位置保留配合left,right,top,bottom移动。
- absolute 绝对定位:相当于已经定位(relative,absolute,fixed推荐relative定位)的父元素定位,如果父元素没有定位,逐级往上找,最后相对于body定位。定位后原位置不保留,应用于:形成独立的一层。
- fixed 固定定位(相对于浏览器窗口定位,定位后原位置不保留配合left、right、top、bottom移动 当四个元素同时存在,left和top的优先级高于right和bottom)应用场景:固定在页面某个位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 30px;
height: 90px;
background: red;
position: fixed;
right: 20px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="box"><a href="#"></a></div>
</body>
</html>
堆叠顺序:z-index:number;
取值越大层级越往上,同时定位,后面的元素在上面,必须配合定位使用(relative,absolute,fixed)可以取负值。
例如:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 500px;
height: 500px;
background-color: deepskyblue;
position: relative;
}
.one,.two{
width: 200px;
height: 200px;
}
.one{
background-color: plum;
position: absolute;
top: 59px;
left: 50px;
z-index: 777;
}
.two{
background-color: palegreen;
z-index: 666;
position: relative;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>