网页层级
网页的层级就像一张一张的纸，层叠在一起，每个元素都会占据一个“纸面”，在默认的情况下会遵循下面的规则，并且浏览器渲染HTML时，遵循“从上到下、从外到内”的顺序。
层级的从低到高的结构
从底层到顶层，网页的层级大致分为以下几类（按堆叠顺序来排序）：
1.最底层：背景与边框
相当于网页的“画布”，所有的元素都堆叠在他们上方，为什么边框也是？因为每个HTMTL元素都遵循“盒模型”的结构，从外到内依次是margin（外边距） -> border（边框） -> padding（内边距） -> content（内容区）。
2.文档流层（核心层）
所有未脱离文档流的元素（默认状态的块级、行内、行内块元素）都会在这一层级，这些元素按照默认的排列规则，层级由HTML顺序决定（后出现的元素覆盖前面的）
3.浮动层
使用float:left/right脱离文档流的元素位于这一层，层级要高于文档流层的元素，但低于定位元素的层级，但是要注意的是：浮动的元素并不会被z-index影响（z-index仅对定位元素生效）
4.定位层
那些使用position:relative/absolute/fixed/sticky都会处于这个层级，层级默认高于前3个层级，并且还支持z-index来手动调整定位元素的层叠问题，所以很容易就能想到 z-index<0 -> z-index:0/auto -> z-index>0这个层叠的顺序，但要注意的就是，z-index:-1的元素会让元素的层级低于文档流层，会被文档流层覆盖，就像是仙人弟子打落凡间被人欺。
5.特殊顶层：弹窗与提示层
这个层级就很好理解了，我们常见的消息弹窗，如alert弹窗或者是z-index:9999这样的仙人弟子成神，通常用于模态框、导航菜单、回到顶部按钮等等都需要"悬浮在最上层"的元素。
小结一下
层级顺序为:
背景层 -> 文档流层 -> z-index<0 -> 浮动层 -> 定位层(z-index:0/auto) -> z-index>0 -> 特殊顶层
层叠规则：
- 后来者居上
在HTML中后出现的元素，默认的层级会比前面的元素高（即会覆盖前面的元素）
- 脱离文档流的元素层级更高
脱离文档的元素（比如浮动、定位的元素）都会“浮”在文档流元素的上方
- 通过z-index手动调整
对于定位的元素，可以手动用
z-index属性来指定层级，值越大越靠上
文档流
在学习完了网页的层级后，我们深入学习文档流就变得轻而易举了。
文档流(Normal Flow)是CSS中最基础也是最核心的布局概念，从字面上我们可以把文档流当现实中的水流一样，指的是元素在网页中的默认排序规则和位置关系，元素会按照HTML结构的顺序依次排列来形成页面基础的布局。
文档流的本质
我们从网页层级可以知道，元素在HTML中会按照一定的顺序进行排序，即后来者居上，每个元素在流中都会占据一定的空间，并且也会影响其他元素的位置。
所有在文档流中的元素默认都处于同一层级(即z-index:auto)，后出现的元素会覆盖前面的元素（重叠的时候）。
元素的排列规则
元素的显示类型(display) 有3种，分别是；块级元素、行内元素和行内块元素。
1.块级元素
我们常见的有:div,p,h1-h6,ul,li等等，默认display:block，块级元素在文档流种的特点就是独占一行，垂直排列，并且可以设置宽高。
2.行内元素
常见的有span,a,strong,em,img，默认为:display:inline,行内元素顾名思义就是在一行内的元素，它不会单独占一行，宽度也由内容决定，并且垂直对齐默认以基线对齐。
3.行内块元素
就是结合了block与inline两者属性的inline-block，具有行内与块级双重属性，铠甲合体了属于是
脱离文档流
元素脱离文档流常见有3种方式，脱离文档流后，会失去上面的排列的特性，并且也不会占据原有的空间，也不会影响其他元素的位置。
常见的3种方式有： 1.浮动 2.绝对定位 3.固定定位.
总结一下
文档流是元素默认的排列规则，核心在于顺序与空间，不同显示类型有不同排列逻辑，脱离了文档流会跳出这些规则，但是文档流始终是网页布局的基础，掌握了文档流，就能不在五行之中，跳出三界之外。
