CSS几种定位的使用

默认值static

这个是我们不使用定位的默认值。即position:static

相对定位relative

相对定位的参照物是使用相对定位之前盒子的位置，可以理解为使用相对定位会让盒子按照盒子现在的位置来发生偏移

特点
相对定位不影响元素本身的特性，使用之后元素也不会脱离文档流，相对原位置进行偏移。

绝对定位absolute

绝对定位的参照物是上一个使用了定位的父级，如果父级元素都没有使用定位，则参照物为body主体。

特点
绝对定位的使用会让元素脱离文档流，和浮动的一些原理相似，使用绝对定位之后的元素也可以让行元素支持所有的CSS样式。块元素撑开内容的宽高，并且可以清除子级的浮动。

固定定位 fixed

固定定位的参照物是浏览器的窗口，相比较前两个，这个是我们布局中常用到的，比如我们常见的一些导航栏的固定，侧边固定的广告位置等等都是使用固定定位来完成的。使用固定定位之后的元素不会随着浏览器窗口的滚动发生位置的变化

特点
固定定位的特点和绝对定位的特点相似，也会脱离文档流，清除子级的浮动

偏移量
这个很好理解，我们既然使用了定位，就需要给它一个位置。我们用 top bottom left right 来控制图片的位置

z-index可以提升层级

比如我们想要看到的图片被定位遮挡了，这个时候我们可以选择给图片提高一个层级。