定位的组成
定位也是用于布局的,主要由两个部分组成:
定位=定位模式+偏移量
定位模式用于指定一个元素在文档中的定位方式。
偏移量则决定了该元素的最终位置
偏移量
当元素开启了定位之后,可以通过偏移量来设置元素位置
top:定位元素和定位位置上边的距离
bottom:定位元素和定位位置下面的边距
left:定位元素和定位位置左侧距离
right:定位元素和定位位置右侧距离
开启定位
语法规则
选择器{
position:定位模式
}
定位模式
1.静态定位
div{
position: static;
} 特点:静态定位 按照标准流特性摆放位置,它没有边偏移
2.相对定位(relative)
div{
position: relative;
} 特点:
1.元素开启相对定位以后,如果不设置偏移量元素不会发生任何变化
2.相对定位会提升元素的层级。
3.相对定位不会使元素脱离文档流。
4.相对定位不会改变元素的性质块还是块,行内还是行内。
参照位置:
相对定位是参照于元素本身在文档流中的位置进行定位