▊ CSS布局的三种机制
- 普通流（标准流）
- 浮动
- 定位
▊ 为什么使用定位？
- 我们需要一个压在所有元素之上且能自由控制、不影响被压元素的元素
- 有时也需要一个不随着鼠标滚动而滚动的固定在屏幕上的盒子
▊ 定位详解
定位包含两部分：定位模式和边偏移
▍边偏移
很简单，就是：top: 20px 、 left: 30px这样的格式
▍定位模式（position）(重点)
总的来说，定位模式有：
| 定位模式 | |
|---|---|
| 静态定位 | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
❶ 静态定位（了解，用不到）
静态定位是默认定位方式，相当于none，即没有定位
❷ 相对定位
“自恋” —— “相对”指的是相对自己原先的标准流位置
“灵魂出窍” —— 原先的位置继续占有（没有脱标）
❸ 绝对定位
完全脱标：完全不占位置
★ ☆ ★
若父类(祖先)没有定位，则以浏览器为准定位
若父类(祖先)有定位(相对，绝对，固定)，则根据父类(祖先)进行定位（一直向上找，直到找到有定位的祖先）
☀ 口诀：子绝父相
先看个例子，便于理解：
问题的关键在于那两个箭头：arr_left，arr_right
↓
两个arr是top盒子的子元素
↓
箭头要用绝对定位(absolute) —— 因为箭头要压在图片上方，且不能占位置(脱标)
top盒子要用相对定位(relative) —— 因为top不能脱标，否则down盒子会升上来，影响排版
↓
总结一下子绝父相的原因：父类需要占位置；子类不能占位置
还有一个小问题，就是问什么两个箭头不用浮动呢？
answer：浮动的元素压不住图片(img)；另外，由于浮动元素仍然受padding的限制，而定位是相对于盒子真正的边界，所以可以完成更多的排版
❹ 固定定位
- 完全脱标（完全不占位置）；
- 一直相对于浏览器可视窗口
- 跟父级完全没有关系
▊ 定位的扩展
▍绝对定位的盒子居中
绝对定位 / 固定定位的盒子不能通过margin左右auto水平居中
left: 50%;
margin-left: -100px; /*假设该元素width=200px，回退其一半即可：margin-left：-100px*/
▍ 堆叠顺序
-
默认为“后来者居上”
-
z-index可以调整盒子的堆叠顺序
注：
- z-index可以理解为z轴的纵深
- 可以取正整数、负整数、0，且不带单位；数值越大，盒子越靠上
z-index值相同，则“后来者居上”z-index只应用于定位（相对，绝对，固定），对静态定位、标准流、浮动无效
▍ 改变定位的display属性
我们最常用的显示模式是行内块(inline-block) —— 一行多个；宽度默认内容宽度
那么有什么方式转换为行内块呢？
❶ 声明display: inline-block
❷ 浮动（float）默认转化为“行内块”（不是真正的行内块，因为是脱标的；下同）
❸ 绝对定位和固定定位也是默认转化为“行内块”
也就是说，一个行内的盒子，如果加了浮动、固定定位、绝对定位，那么就不用转换，直接放心地给它设置width和height就行了
还有一个好处！
浮动元素，绝对定位元素不会触发外边距合并（塌陷）的问题
☀ 注
文章案例改编自《黑马程序员-web前端》
&Lolisaikou