CSS之定位-相对定位
定位：定位是⼀种更⾼级的布局⼿段
通过定位可以将元素摆放到任意位置
使⽤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>
css固定定位.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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。