定位:定位是一种更高级的布局手段
通过定位可以将元素摆放到任意位置
使用position属性设置定位
可选值:
static:默认值(未开启定位)
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位
sticky:开启元素的粘滞定位
相对定位:当元素的属性position设置为relative时,则元素开启了相对定位(相对于原先位置)
相对定位的特点:
1.元素开启相对定位后,如果不设置偏移量元素不会发生任何变化
2.相对定位是参照元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流(如果是块元素的话,原来的位置还保留)
5.相对定位不会改变元素的性质,块还是块,行内还是行内
偏移量(offset):
当元素开启相对定位后,可以通过设置偏移量移动元素的位置
top:
定位元素和定位位置上边的距离
bottom:
定位元素和定位位置下边的距离
垂直方向的定位位置由top和bottom设置
通常情况下,只会选其中一个
top值越大,定位元素越往下移动
bottom值越大,定位元素越往上移动
left:
定位元素和定位位置左边的距离
right:
定位元素和定位位置左边的距离
水平方向的定位位置由left和right设置
通常情况下,只会选其中一个
left值越大,定位元素越往右移动
right值越大,定位元素越往左移动
Demo:
<!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>定位</title>
<style>
.box1{
width:200px;
height:200px;
background-color:seagreen;
}
.box2{
width:200px;
height:200px;
background-color:darkorange;
/* 开启定位 */
position: relative;
/* 设置偏移量 */
left:100px;
/* bottom:200px;*/
top:-200px;
}
.box3{
width:200px;
height:200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>