防疫不防学，逆战2020，中国加油！
我们在学习CSS中的定位是很重要的一部分，使用它能够让我们对页面的布局设计进行的更加得心应手，下面我将对五种定位进行详细的介绍。
常用定位分为：1.静态定位 static 2.相对定位 relative 3.绝对定位 absolute 4.固定定位 fixed 5.粘性定位 sticky
这五种常用的定位使用得当能让我们轻松实现多样化的页面布局。
一.静态定位 static：
静态定位 position:static; 它是position的默认值，它是默认文本流的状态占据位置，其不能用定位方法left/right/top/bottom，对元素的位置进行调整，只需要了解，一般用不上。
二.相对定位 relative:
相对定位：position:relative; 它是以自身默认位置为参照物进行的定位，使用left/right/top/bottom相对于其原来的位置进行相应的位置变换。
并且使用相对定位的元素，其不会脱离文档流（不会影响其他元素的位置结构），在进行位置调整后其默认位置依旧会占据原来位置和大小。不会影响其他元素布局。
relative总结：参照物是自身默认位置；不会破坏文档流且会占据空间。
三.绝对定位 absolute：
绝对定位 position:absolute; 它通常与relative配合使用，即给父元素position:relative; 子元素进行position:absolute;再对子元素进行left/right/top/bottom操作，会使子元素相对于父元素进行位置的变换，若父元素是其他定位方式，子元素依旧是以父元素为参照，前提是父元素的定位方式不影响整体布局，一般使父元素为relative。
*在使用absolute的时候，我们要注意，它会使元素脱离文档流，会使后面的页面发生结构变化。
若父元素没有写定位，那子元素会以整个文档为参考，即以body为参考定位，如图：
在绝对定位中，定位元素是可以重叠的，像两个物件摞在一起，至于显示谁，我们可以使用z-index:数值；的形式进行层叠层次的控制，数值越大层次越高会遮挡层次低的，且数值可以为负数。
绝对定位总结：绝对定位 absolute是以已有定位的父元素为参考进行定位的；父元素没有定位会以body为参考定位；会使元素脱离文档流。
四.固定定位 fixed：
固定定位：position:fixed;是以浏览器窗口为参照物，使用固定定位会使元素脱离文本流，相对于窗口进行定位，不会根据页面的滚动而移动。
五.粘性定位 sticky：
粘性定位 position:sticky; 不会使元素脱离文档流，粘性定位它是一种专门用于窗口滚动时的定位方式，具体表现为当定位在其原有位置且在视口之内的时候表现为与相对定位一样的效果，当页面向上下或者左右滑动的时候，使其原有位置超出了视口的位置，其表现为固定定位的效果，会使带有粘性定位的元素相对于窗口进行定位。在这值得注意的是，在使用粘性定位的时候我们只能对其设置left/right/top/bottom四个值之一，否则粘性定位将于相对定位的一样。
粘性定位总结：粘性定位就是relative和fixed的结合；且对其进行定位只能使用left/right/top/bottom的其中一种值；粘性定位不会使元素脱离文档流。