css定位机制有三种：文档流、浮动（float）、定位（position）

一、文档流（常规流）

什么是文档流

从直观上理解文档流（正常流）指的是元素按照其在HTML中的位置顺序决定排布的过程，主要形式是自上而下，一行接一行，每行从左到右的顺序排列页面元素。

文档流的类型

1.块级元素的块级格式
2.行内元素的行内格式
3.两种元素的相互定位方式

什么情况下会导致元素脱离文档流

• 浮动（float）
• 绝对定位(position:absolute\fixed)
  这两种的区别在于宽度缺失

由于使用了相对定位和绝对定位的元素都会产生宽度缺失,因此会造成层叠的情况。层叠顺序基本按照后者覆盖前者的顺序。但是如果要改变顺序的话,就需要使用z-index属性。

需要注意的是:z-index只有在position值为relative,absolute和fixed的元素上有效。而其比较的规则遵循“拼爹原则”,即先比较具有z-index属性的父辈元素,父辈元素z-index大的子辈元素都大。

但更需要注意的是:并非使用了absolute来进行定位就一定要设置z-index,大量的z-index会使项目无法维护

不脱离文档流的情况

• 块级
• 行内
• 相对定位</