相对定位、绝对定位、固定定位

定位

什么是定位： 定位指得就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素。

通过position属性来设置元素的定位，可选值：

- static：默认值，元素没有开启定位

-relative：开启元素的相对定位

-absolute：开启元素的绝对定位

-fixed：开启元素的固定定位（也是绝对定位的一种）

相对定位

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

1.当开启了元素的相对定位以后，而不设置偏移量，元素不会发生任何变化

2.相对定位是相对于元素在文档流中原来的位置进行定位

3.相对定位不会脱离文档流

4.相对定位会使元素提升一个层级

5.相对定位不会改变元素的性质，块还是块，内联还是内联

当开启了元素的定位时，（position属性值是一个非static的值），可以通过left、right、top、bottom四个属性来设置元素的偏移量。

left：元素相对于其定位位置的左侧偏移量

right：元素相对于其定位位置的右侧偏移量

top：元素相对于其定位位置的上边偏移量

bottom：元素相对于其定位位置的下边偏移量

通常偏移量只需要使用两个就可以对一个元素进行定位，一般使用水平方向的偏移量和垂直方向的偏移量来为一个元素进行定位。

绝对定位

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

1.开启绝对定位以后，会使元素脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生改变

3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般来说，开启了子元素的绝对定位都会同时开启父元素的相对定位），如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

4.绝对定位会使元素提升一个层级

5.绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度和高度默认被内容撑开

固定定位

当元素的position属性设置为fixed时，则开启了元素的固定定位

固定定位也是一种绝对定位，他的不补分特点都和绝对定位一样。

不同的是：固定定位永远都会相对于浏览器的窗口进行定位，固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动