1. 行内元素设置定位之后也可以设置宽高
2. 块元素设置定位之后，如果不设置宽高，则默认宽高为内容的宽高
3. 脱离标准流的盒子不会触发外边距塌陷
4. 定位会压住标准流里的所有内容（浮动不会）

定位 = 定位模式 + 边偏移

定位模式

定位模式决定元素的定位方式，使用 position属性来设置，其属性值如下：

属性值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

边偏移就是盒子的最终位置，其属性为 top，bottom，left和right

边偏移的用法和外边距差不多，都是表示子盒子和父盒子之间的距离

---

静态定位（了解）

就是让元素不使用定位，使用标准流（写了跟没写一样，因为元素默认就是标准流）

position: static;

---

相对定位

1. 在自己原来位置的基础上进行移动（相对于父元素）
2. 虽然看上去移动了，但是原来的位置还是存在的（保留原来的位置），也就是没有脱离标准流，所以后面的元素不能占上来
3. 在没有设置宽度的情况下，宽度是整个浏览器的宽度
4. 相对定位会压住其他的标准流或者浮动元素

position: relative;
top: 50px;
left: 80px;

---

绝对定位

1. 绝对定位是那个父类标签设置有定位，则以那个父类标签为基准，此时绝对定位就是子标签和那个父类标签之间的距离；

   如果父类标签都没有设置定位，则以body标签为基准（也就是以浏览器为基准），此时绝对定位就是子标签和body标签之间的距离

2. 绝对定位会脱离标准流，后面的元素会来占据位置

3. 宽度由元素里面的内容决定

position: absolute;
top: 50px;
left: 80px;

小算法

使用绝对定位的盒子是无法使用 margin: 0 auto; 水平居中的，但可以使用如下小算法来进行居中

1. 让绝对定位的盒子移动到父标签的中心位置，left: 50%;
2. 然后在像右移动绝对定位盒子自身长度的一半

.a {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 20px auto;
    background-color: orange;
}

.b {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    background-color: pink;
}

<div class="a">
	<div class="b"></div>
</div>

---

固定定位

1. 以浏览器为参照移动
2. 跟父元素没有关系
3. 就固定在一个位置，不会随页面的滚动而滚动
4. 固定定位不会占用原来的位置，也就是会脱离标准流

position: fixed;
top: 50px;
left: 80px;

小算法（目录、回到顶部）

先用固定定位移动到整个页面的 50% ，然后在用外边距移动（移动距离为内容页面宽度的一半多一点）

.a {
    width: 300px;
    height: 300px;
    margin: 20px auto;
    background-color: orange;
}

.b {
    position: fixed;
    top: 20%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: 180px;
    background-color: pink;
}

<div class="a"></div>
<div class="b"></div>

---

粘性定位（了解）

1. 以浏览器为参照
2. 没有脱离标准流，原来的位置不会消失
3. 必须添加 top，left， right， bottom中的其中一个才会生效

兼容性较差，IE不支持该定位

position: sticky;
top: 50px;

---

定位叠放顺序

在使用定位的时候，可能会出现盒子重叠的情况，此时，可以使用 z-index 来控制盒子的先后次序

1. 数值可以为正数、复数和0，默认是auto；数值越大，盒子越靠上
2. 如果数值相同，则按代码的先后顺序显示，最后的盒子在上面（后来居上）
3. 数值后面不能加单位
4. 只有定位才有这个属性（标准流和浮动是没有这个属性的）

选择器 {
    z-index: 1;
}