CSS之定位-相对定位
定位：定位是⼀种更⾼级的布局⼿段
通过定位可以将元素摆放到任意位置
使⽤position属性设置定位
可选值:
static:默认值(未开启定位)
relative:开启元素的相对定位
absolute:开启元素的绝对定位
fixed:开启元素的固定定位
sticky:开启元素的粘滞定位
相对定位:当元素的属性position设置为relative时,则元素开启了相对定位(相对于原先位置)
相对定位的特点:
1.元素开启相对定位后,如果不设置偏移量元素不会发⽣任何变化
2.相对定位是参照元素在⽂档流中的位置进⾏定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离⽂档流(如果是块元素的话,原来的位置还保留)
5.相对定位不会改变元素的性质,块还是块,⾏内还是⾏内
偏移量(offt):
当元素开启相对定位后,可以通过设置偏移量移动元素的位置
top:
定位元素和定位位置上边的距离
bottom:
定位元素和定位位置下边的距离
垂直⽅向的定位位置由top和bottom设置
通常情况下,只会选其中⼀个
top值越⼤,定位元素越往下移动
bottom值越⼤,定位元素越往上移动
left:
定位元素和定位位置左边的距离
right:
定位元素和定位位置左边的距离
⽔平⽅向的定位位置由left和right设置
通常情况下,只会选其中⼀个
left值越⼤,定位元素越往右移动
right值越⼤,定位元素越往左移动
Demo: