四种定位模式总结

定位模式	是否脱标占有位置	是否可用边偏移	移动位置基准
静态static	不脱标，正常模式	否	正常模式
相对定位relative	不脱标，占有位置	是	相对于自身移动
绝对定位absolute	完全脱标，不占有位置	是	相对于父级移动位置
固定定位fixed	完全脱标，不占有位置	是	相对于浏览器移动位置

重要技巧：

1、子绝父相:

如果自己是绝对定位的话，父级要用相对定位。

2、z-index:

相对定位relative、绝对定位absolute、固定定位fixed可用，浮动、标准流不可用。

3、绝对定位的左右上下居中对齐:

.son {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px;
}

完美写法：

.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

---

结束