定位是CSS样式最常用的几个属性之一，但是你真的了解定位的用法吗？
CSS定位使用position属性，其属性值为static、fixed、absolute和relative。
static是默认值，表示没有定位
fixed是固定定位，相对于窗口定位，使用position：fixed的元素，在配合left、top、right以及bottom等属性可以将元素固定在窗口固定位置，使元素不会随着窗口的滑动而滑动。例如我们常见的返回顶部：
京东侧边栏
固定定位代码案例模仿京东侧边栏
模仿京东侧边栏
relative是相对定位，其实就是相对于自己原来的位置，进行偏移，同样需要配合left、top、right以及bottom等属性使用。
外层大盒子为父元素，内层小盒子为子元素，子元素初始状态显示距离父元素左边100px，当向右移动后，移动到虚线框位置，其实就是相对于自己原来的位子移动100px，不是相对父元素移动。
相对定位
absolute是绝对定位，其实就是相对于离他最近的已经定位的父元素进行偏移，如果所有父元素都没有设置定位，那么将相对于窗口定位。
绝对定位
绝对定位
以上是我们在学习定位时的基本知识，但是你知道定位还有其他什么妙用吗？
全屏
有时候我们需要设置整个网页为一屏时，例如我们的登录页面经常就是这样的。例如搜狐号登录窗口
搜狐号登录页面
设置绝对定位，将宽高设置为100%，即可实现。
全屏
子元素相对于父元素水平居中垂直居中
子元素相对父元素居中
子元素相对于父元素水平垂直居中2，根据思路自行完成
思路：
第一步创建一个已定位的父区域box1
第二步创建一个和中间内容大小一致的元素box2，设置绝对定位，且left为50%，top为50%，这样该元素的左上角定点就在父元素box1中心。
box2的定点与box1的中点重合
第三步，在虚线元素box2内部放我们需要居中显示的元素box3，和box2宽高一致，设置绝对定位，top:-50%;left:-50%;这时我们box3就会移动一半在中心点上方，移动一半在中心点左边，那么box3和box1中心点重合，就可以实现box3在box1中水平居中，垂直居中。之后将box2设置为无背景即可
box3中点与box1中点重合
根据思路自行写出代码
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4830/viewspace-3146114/ ，如需转载，请注明出处，否则将追究法律责任。
