▊ CSS布局的三种机制

1. 普通流（标准流）
2. 浮动
3. 定位

 
▊ 为什么使用定位？

1. 我们需要一个压在所有元素之上且能自由控制、不影响被压元素的元素
2. 有时也需要一个不随着鼠标滚动而滚动的固定在屏幕上的盒子

 
▊ 定位详解

定位包含两部分：定位模式和边偏移

▍边偏移

很简单，就是：top: 20px 、 left: 30px这样的格式

▍定位模式（position）(重点)

总的来说，定位模式有：

定位模式
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

❶ 静态定位（了解，用不到）

静态定位是默认定位方式，相当于none，即没有定位

❷ 相对定位

“自恋” —— “相对”指的是相对自己原先的标准流位置

“灵魂出窍” —— 原先的位置继续占有（没有脱标）

❸ 绝对定位

完全脱标：完全不占位置

★ ☆ ★

若父类(祖先)没有定位，则以浏览器为准定位

若父类(祖先)有定位(相对，绝对，固定)，则根据父类(祖先)进行定位（一直向上找，直到找到有定位的祖先）

 
☀ 口诀：子绝父相

先看个例子，便于理解：

问题的关键在于那两个箭头：arr_left，arr_right
    ↓
两个arr是top盒子的子元素
    ↓
箭头要用绝对定位(absolute) —— 因为箭头要压在图片上方，且不能占位置(脱标)
top盒子要用相对定位(relative) —— 因为top不能脱标，否则down盒子会升上来，影响排版
    ↓
总结一下子绝父相的原因：父类需要占位置；子类不能占位置
 

还有一个小问题，就是问什么两个箭头不用浮动呢？

answer：浮动的元素压不住图片(img)；另外，由于浮动元素仍然受padding的限制，而定位是相对于盒子真正的边界，所以可以完成更多的排版

 
❹ 固定定位

1. 完全脱标（完全不占位置）；
2. 一直相对于浏览器可视窗口
3. 跟父级完全没有关系

 
▊ 定位的扩展
 
▍绝对定位的盒子居中

绝对定位 / 固定定位的盒子不能通过margin左右auto水平居中

left: 50%;
margin-left: -100px; 	/*假设该元素width=200px，回退其一半即可：margin-left：-100px*/

 
▍ 堆叠顺序

1. 默认为“后来者居上”

2. z-index可以调整盒子的堆叠顺序

注：

1. z-index可以理解为z轴的纵深
2. 可以取正整数、负整数、0，且不带单位；数值越大，盒子越靠上
3. z-index值相同，则“后来者居上”
4. z-index只应用于定位（相对，绝对，固定），对静态定位、标准流、浮动无效
    

▍ 改变定位的display属性

我们最常用的显示模式是行内块(inline-block) —— 一行多个；宽度默认内容宽度

那么有什么方式转换为行内块呢？

❶ 声明display: inline-block

❷ 浮动（float）默认转化为“行内块”（不是真正的行内块，因为是脱标的；下同）

❸ 绝对定位和固定定位也是默认转化为“行内块”

也就是说，一个行内的盒子，如果加了浮动、固定定位、绝对定位，那么就不用转换，直接放心地给它设置width和height就行了
 

还有一个好处！

浮动元素，绝对定位元素不会触发外边距合并（塌陷）的问题

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

☀ 注

文章案例改编自《黑马程序员-web前端》

&Lolisaikou