文档流与脱离文档流

上一节讲到了z-index，而众所周知，z-index仅适用与定位的元素，定位极易造成脱离文档流的情况。而什么是文档流呢？

文档流

文档流只是我们把国外的标准翻译过来的一种习惯的叫法，英文原文为“normal flow ” 应该叫做正常流、普通流、标准流。

HTML元素分为块级元素、行内元素、行内块元素三大类，而这三大类元素则构成了我们的HTML文档，这些元素依据其自身的规则，如从上至上，从左至右的布局。块级元素独占一行，行内元素与行内块元素可在一行内并排显示，这样按照规则进行布局的文档我们成为文档流

脱离文档流

css中的定位机制有三种：
1、正常的文档流
2、float
3、postion

在这几种定位机制中，有几种方式是脱离文档流的。什么是脱离文档流呢？可以这样理解，本来这个标签是属于文档流管理的，那么它应该按照文档流的正常布局方式从左至右从上之下，并且符合标签本身的含义。

脱离文档流是指，这个标签脱离了文档流的管理。不受文档流的布局约束了，并且更重要的一点是，这个标签在原文档流中所占的空间也被清除了。

脱离文档流的元素处于浮动状态（可以理解为漂浮在文档流的上方），当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。
那么，这几种脱离文档的的定位机制包括哪些呢？

①float
注意！！！使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。

②position：absolute
相对于第一个position不是static的父级元素定位，当父级元素的position全是static的时候，absolute是相对于html来进行定位的。

③fixed
完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）。

④transform
transform也可以使元素脱离文档流

⑤animate动画
animate动画也可以使元素脱离文档流

⑥一个半脱离文档流的方法，就是position：relative。
半脱离文档流，本体还在文档流中占有位置，但是却可以通过改变位置使其漂浮到其他的地方，其定位方式是相对其原先在文档流中的位置进行定位的。