层叠上下文
- 一个元素具备一下任意条件，该元素会创建层叠上下文
- 同一层叠上下文的背景色、浮动子元素、定位子元素等堆叠顺序
|
同一层叠上下文，层叠级别由高到低 |
|
| ↓ 正z-index |
|
z-index为正的内部元素 |
| ↓ z-index为0 |
|
z-index为0的内部元素 |
| ↓ 行内盒子 |
(内容) |
普通文档流下的行内盒子 |
| ↓ 浮动盒子 |
(布局) |
除position:relative的浮动盒子 |
| ↓ 块盒子 |
(布局) |
普通文档流下的块盒子 |
| ↓ 负z-index |
|
z-index为负的内部元素 |
| ↓（父级）背景和边框 |
(装饰) |
当前层叠上下文的背景和边框 |
层叠上下文的特点
- 一个元素的Z轴方向上的堆叠顺序，由
层叠上下文和层叠级别两个因素决定
- 同一
层叠上下文中，比较的是内部元素层叠级别，级别大的在上
- 同一
层叠上下文中，层叠级别相同，遵循『后来居上』原则
-
不同
层叠上下文，比较父元素层叠级别
BFC(块级格式上下文) 和 IFC(行级格式上下文)
任何元素可看成盒子，普通文档流中，盒子会参与格式上下文。
盒子只能是行内盒子inline-level box 或是块盒子block-level box其中一种，并对应参加IFC或是BFC。
-
盒子
- 行内盒子inline-level box
创建BFC
- inline
- inline-block
- inline-table
- 块盒子block-level box
参与BFC
- run-in box
-
格式上下文
-
块级格式上下文BFC创建条件（任一）
- 根元素
- float属性除none以外的值
- position属性除static和relative以外的值
- overflow属性除了visible以外的值
- 元素类型inline-block,table-caption,table-cell
-
块级格式上下文BFC特点
- 在同一BFC中，盒子自顶向下排列，垂直距离由margin决定，且相邻的盒子垂直外边距（不是相邻的兄弟元素）会叠加
- 在同一BFC中，每个一个盒子左外边界紧贴容器左边，即使存在浮动元素
- 计算BFC高度时，内部浮动子元素的高度也会参与计算
-
BFC应用
- 清除相邻垂直外边距叠加
- 清除浮动引起的塌陷
- 避免文字环绕
- 创建自适应两列布局
