10.1 三种定位方案

盒子的定位包括三种定位方案。

1、定位方案1：正常流定位（Normal Flow）

简称正常流。正常流此处不是指流式布局，而是指定位方案。正常流定位的盒子简称正常流盒子。

从CSS属性角度看，该定位指position: static、relatvie、sticky。从占位角度看，盒子具有占位；从FC角度看，该盒子包括BFC内的block-level盒子与IFC内的inline-level盒子。

正常流定位盒子具有以下特点。

特点1：盒子具有占位，位置与宽高影响后续盒子的位置。

特点2：盒子占据区域的位置完全由浏览器自动计算。

特点3：top、bottom、left、right等坐标属性在static时无效，在relative与sticky时改变的是显示区域的位置。占据区域的位置始终不变。

特点4：盒子的页面显示顺序与HTML源代码里的顺序一致。

2、定位方案2：绝对级别定位（absolute-level）

从CSS属性看，该定位指position: absolute、fixed。从占位角度看，盒子完全没有占位。

绝对级别定位盒子具有以下特点。

特点1：盒子完全没有占位，它的位置完全不影响后续盒子的位置。

特点2：类似PS新建图层，盒子在新图层的位置由开发人员指定。

特点3：盒子的页面显示顺序与HTML源代码里的顺序不一致。

3、定位方案3：浮动定位

从CSS属性角度看，该定位指float: left或float: right。从占位角度看，既不完全像正常流定位，也不完全像绝对级别定位。

浮动定位盒子具有以下特点。

特点1：盒子有占位，但不是流式布局的依次占位。

特点2：盒子由开发人员指定为靠左或靠右。

特点3：页面显示顺序与HTML源代码里的顺序不一致。

4、in-flow定位与脱离流定位

盒子定位方案根据占据区域情况分为两种类型：

（1）in-flow定位（在流内）。正常流定位属于in-flow定位。in-flow定位可以理解为与正常流定位等价，后续直接称正常流定位。

（2）脱离流out-of-flow定位。绝对级别定位与浮动定位属于脱离流定位。脱离流定位的盒子会在内部新建BFC对象，详情见“10.5 三个模型的关系”。