定位的简介

定位(position)

        定位是一种更加高级的布局手段

        通过定位可以将元素摆放到页面的任意位置

       使用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越大元素越靠左