CSS学习之position定位

CSS中的四种定位方式

定位在css中可谓是布局的常用手段，配合浮动能使网页布局更加的灵活多变，今天跟大家一起分享下学习定位的一点小结
css中默认不开启定位，其元素的position属性默认值为static。若想要元素定位，则需手动开启定位，即设置position的属性值可选为：relative，absolute，fixed，sticky。

一、相对定位（relative）

当元素position属性值设置为relative时则开启了相对定位，相对定位具有以下特点：
1 开启该定位的元素不会脱离文档流，但是会比文档流高一个层次；
2 元素的性质不会改变，即块元素依然是块元素，行内元素依然是行内元素。
3 定位的参照物是该元素在文档流的位置。
4 需要设置偏移量元素位置才能发生变化。

二、绝对定位（absolute）

当元素position属性值设置为absolute时则开启了绝对定位，绝对定位具有以下特点：
1 开启该定位的元素会脱离文档流，层级提升。
2 元素的性质会发生改变，行内元素会变成块元素。
3 定位的参照物是 该元素开启了定位的相近的祖先元素，若祖先元素都没开启定位，则默认参照根元素（html）
4 需要设置偏移量元素位置才能发生变化。

三、固定定位（fixed）

当元素position属性值设置为fixed时则开启了固定定位，固定定位本质上也是绝对定位，唯一不同点在于：
固定定位的参照物是浏览器的视口窗，位置不会随着网页的滚动而滚动，一般这一特性会用在网页中的广告效果

四、粘滞定位（sticky）

当元素position属性值设置为sticky时则开启了粘滞定位，粘滞定位具有以下特点：
1 其兼容性不是特别好，官方文档中IE并不支持
2 其特点和相对定位基本一致
3 粘滞定位可以在元素达到某个位置时将其固定住

总结

一般来说在布局中常用的是相对定位和绝对定位，一些特殊场景会用到固定和粘滞定位