静态定位（默认值） position:static；
就是默认的文档流布局，元素处于文档流中,只能依次排列，不能随意改变自己的位置
使用其他定位属性后，可以让元素通过 top/bottom/left/right 四个属性移动
层级 z-index：使用定位后，元素发生重叠时可以调整层级
- z-index 的值越大，层级越高，值大的元素会覆盖值小的元素
- 值为整数值，没有任何单位
- 默认值是 auto，可以看作是层级 0，z-index 还可以取负值
相对定位 position:relative；
移动参照物：元素自己原来的位置
- 不会脱离文档流并保留原有位置，还可以支撑父元素，不影响父级
- 与外间距 margin 的区别：margin 会影响其他元素，相对定位不会挤开兄弟元素，但可能会遮盖
- 常用于需要微调元素位置时使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>.fu {background-color: #ff0;}.fu>div {width: 100px;height: 100px;}.z1 {background-color: #f00;/* 注意!要先加position才能移动位置 调整层级 */position: relative;z-index: 10;/*整数 默认0 数值越大 层级越高 */left: 25px;}.z2 {background-color: #0f0;/*相对定位移动参照物:自己原来的位置不脱离文档流 不释放布局空间 也不会挤开其它元素*/position: relative;left: 50px;bottom: 50px;z-index: -1;}.z3 {background-color: #00f;}</style>
</head>
<body>
<div class="fu"><div class="z1"></div><div class="z2"></div><div class="z3"></div>
</div>
</body>
</html>
绝对定位 position:absolute；
移动参照物：离自己最近的使用了非静态定位属性的上层元素
会一路向上找，终点是 html 根元素
- 绝对定位的元素会脱离文档流，释放布局空间
- 小技巧：”子绝父相”子元素使用绝对定位，父级设置相对定位后就可以变成子元素移动的参照物
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>绝对定位</title><style>.fu {background-color: #ff0;position: relative;width: 500px;}.fu>div {width: 100px;height: 100px;}.z1 {background-color: #f00;}.z2 {background-color: #0f0;position: absolute;top: 0;right: 0;}.z3 {background-color: #00f;}</style>
</head>
<body>
<div class="fu"><div class="z1"></div><div class="z2"></div><div class="z3"></div>
</div>
</body>
</html>
固定定位 position:fixed；
移动参照物：html 根元素（浏览器窗口）
- 固定定位也会脱离文档流
- 我们可以利用固定定位实现页面固定广告与撑满全屏的效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>固定定位</title><style>.fu {background-color: #ff0;}.fu>div {width: 100px;height: 100px;}.z1 {background-color: #f00;}.z2 {background-color: #0f0;/* 固定定位 参照物为html元素 会脱离文档流 释放布局空间 */position: fixed;right: 0;bottom: 0;}.z3 {background-color: #00f;}</style>
</head>
<body>
<div class="fu"><div class="z1"></div><div class="z2"></div><div class="z3"></div>
</div>
</body>
</html>
4.5 布局方式总结
