定位是CSS样式常用的几个属性之一，但是你真的了解定位的用法吗？

CSS定位使用position属性，其属性值为static、fixed、absolute和relative。

static是默认值，表示没有定位

fixed是固定定位，相对于窗口定位，使用position：fixed的元素，在配合left、top、right以及bottom等属性可以将元素固定在窗口固定位置，使元素不会随着窗口的滑动而滑动。例如我们常见的返回顶部：

京东侧边栏

固定定位代码案例模仿京东侧边栏

模仿京东侧边栏

relative是相对定位，其实就是相对于自己原来的位置，进行偏移，同样需要配合left、top、right以及bottom等属性使用。

外层大盒子为父元素，内层小盒子为子元素，子元素初始状态显示距离父元素左边100px，当向右移动后，移动到虚线框位置，其实就是相对于自己原来的位子移动100px，不是相对父元素移动。

相对定位

absolute是定位，其实就是相对于离他近的已经定位的父元素进行偏移，如果所有父元素都没有设置定位，那么将相对于窗口定位。

定位

定位

以上是我们在学习定位时的基本知识，但是你知道定位还有其他什么妙用吗？

全屏

有时候我们需要设置整个网页为一屏时，例如我们的登录页面经常就是这样的。例如搜狐号登录窗口

搜狐号登录页面

设置定位，将宽高设置为，即可实现。

全屏

子元素相对于父元素水平居中垂直居中

子元素相对父元素居中

子元素相对于父元素水平垂直居中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中点重合

根据思路自行写出代码