Web前端自学记录（五） （Position）

定位（Position）

1.定位的简介

定位(position)

定位是一种更加高级的布局手段
通过定位我们可以将一个元素摆放到页面的任意位置

使用position属性来设置位置

可选值：
    static 默认值，元素使静止的，没有开启定位
    relative 开启元素的相对定位
    absolute 开启元素的绝对定位
    fixed 开启元素的固定定位
    sticky 开启元素的粘滞定位

偏移量(offset)

当元素开启了定位后，可以通过偏移量来设置元素的位置
    top 定位元素和定位位置上边的距离
    bottom 定位元素和定位位置下边的距离
    left 定位元素和定位位置左边的距离
    right 定位元素和定位位置右边的距离

2.相对定位

当元素的position属性值设置为relative时则开启了元素的相对定位

相对定位的特点
     1.元素开启相对定位后，如果不设置偏移量元素不会发生任何变化
     2.相对定位是参照与元素在文档流中的位置进行定位的
     3.相对定位会提升元素的层级
     4.相对定位不会使元素脱离文档流
     5.相对定位不会改变元素的性质

3.绝对定位

当元素的position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位的特点：
    1.开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
    2.开启绝对定位后，元素会从文档流中脱离