CSS中的定位属性

position属性它可以对元素的定位类型进行设置

1. static（静态定位）
   position属性的默认值，此时设置left，right，top，bottom将不会生效。
   
   
   设置的left: 50px;没有生效。
2. relative（相对定位）
   他的定位是相对自身原来位置的，如果以前没有设置position或者position值为static，那么设置relative后，它的位置是根据你所设置的left，right，top，bottom值参照自身原来的位置进行移动。
   没有设置left，right，top，bottom前
   
   
   设置left，right，top，bottom后按照设置前偏移了
   
   
3. absolute（绝对定位）
   他的定位参照物是自己的父级，所以父级必须有position属性static除外的其他三个如果没有的话就会向上一直找，直到body为止，而且还会脱离文档流做出重叠的效果。
   
   
   box1和box2作为body的子级通过设置的上下左右分别进行了移动。
4. fixed（固定定位）
   这个属性是相对浏览器窗口为基准进行定位的，无论怎样移动滑动条，它都会固定在相对于浏览器窗口的固定位置，所以在这里的top，bottom，left，right调整的是相对于窗口的位置。
   
   
   类似于视频悬浮窗。
5. sticky（粘性定位）
   它类似于fixed，当页面滚动超出目标区域时，表现为固定在未滚动前在原屏幕的位置，如图所示，我通过设置让橙色块显示在屏幕当中一半屏幕外一半，之后再进行滚动的时候橙色块依然固定在原来位置。