定位的由来
有些通过浮动不好实现的布局，定位的出现，可以实现更加灵活的布局，以及与js交互。
元素的定位属性主要由边偏移和定位模式两部分组成
1.边偏移
边偏移属性：
- top – 定义元素相对于其父元素上边线的距离
- bottom – 定义元素相对于其父元素下边线的距离
- left – 相对于父元素左边线的距离
- right – 相对于父元素右边线的距离
值都是像素值，例如： top: 20px; right: 30px;
2.定位模式及定位的类型
position 属性用于定义元素的定位类型position的值如下：
- static – 自动定位（默认的定位方式）；
- relative – 相对定位，相对于其原文档流的位置进行定位；
- absolute – 绝对定位，相对于其上一个已经定位的父元素进行定位；
- fixed – 固定定位，相对于浏览器串口进行定位
2.1 static-静态定位
静态定位，static是position的默认取值，也就是说它属于标准流，所有元素的默认定位方式都是静态定位。因此无法通过上文所提到的边偏移属性来改变元素的位置。它的唯一作用就是取消定位。
2.2 relative - 相对定位
相对定位移动的位置基准点是自身的左上角的点为准，也就是说相对于之前左上角那一点按照边偏移的量进行偏移来移动自己的位置，但是它依旧占据之前的位置
2.3 absolute - 绝对定位
特点是：
- 不占据原有的位置，效果和浮动一样；
- 若所有父元素都没有定位，则基准点是当前所看到的屏幕的左上角的那一点，及已<body>的左上角为基准点
- 如果父元素有定位，则以最近一层有定位的父元素的左上角为基准点；
由上面相对和绝对定位的特点，我们实际应用中经常使用的搭配是父元素为相对定位，因为父元素要占据原来的位置，子元素一般要使用绝对定位，可以在相对定位的父元素中自由的移动。
绝对定位中的水平/垂直居中
绝对定位或者浮动会使margin: xx auto;失效，定位的盒子实现水平居中的方式是分两步走：
- 首先设置position:absolute; left: 50%; 这时会发现盒子向右边多移动了自身的一半距离，所以要把这一版距离给走回去；
- 把多走的盒子水平方向宽度的一半距离使用margin-left的负值就好了，即 margin-left: -width/2;
垂直居中方式： top: 50%; margin-bottom: -height/2;
2.4 fixed - 固定定位
固定定位和绝对定位一样，不占据原有的位置，只是它的定位不跟父容器有关，只以浏览器或者说是当前浏览器中的左上角为基准点，不随页面的上下滚动而移动，就像定在了浏览器中的某一位置一样。
定位的模式转换
跟浮动的隐式模式转换一样，当元素添加了绝对定位或者固定定位时，元素模式也会发生转换，都转换为行内块模式。所以如果行内元素添加了绝对定位或者固定定位后，浮动后，可以不用转换模式，直接给高度和宽度就行了。
z-index 叠放测序（前提是定位的元素）
叠放我们可以理解为页面的厚度方向的一个次序，如果多个盒子都采用了绝对定位或者固定定位，如果边偏移取值相同，则按照代码顺序，最后写的位于最上层，可以把默认的堆叠看做是数据结构的入栈操作。如果想对盒子的堆叠顺序做改变的话需要对定位的元素的z-index属性进行设置值，绝对定位和固定定位的元素z-index默认值是0，取值为整数，可以是正负数，代表层级的意思，且无单位；z-index的值越大越位于上层。只有相对定位、绝对定位和固定定位才有z-index属性，标准流、静态定位和浮动都不能使用该属性。
几种定位的对比
定位的对比：
| 定位的类型 | 是否占用位置 | 是否可以使用边偏移 | 偏移的基准点 |
|---|---|---|---|
| static-静态定位 | 属于标准流布局，一般默认为这种方式 | 不可以 | - - - - - - - - - - - - - - - - - |
| relative-相对定位 | 没有完全的脱离标准流布局，依然占据原有的位置，但是是浮起来的 | 可以 | 相对自身初始位置的左上角做位置偏移移动 |
| absolute-绝对定位 | 完全脱离标准流布局不占有标准流中的位置 | 可以 | 相对于最近一层定位了的父级的左上角做位置偏移移动；如果无父级定位的话以浏览当前窗口的左上角为基准 |
| fixed-固定定位 | 完全脱离表混流布局，不占有标准流中的位置 | 可以 | 只相对于浏览器的左上角为基准点做偏移来移动位置 |
