文档流 定位方式

在html中，默认使用流式布局

流式布局：在一个html中每个元素都有自己的位置，行元素和行内块元素从左到右，块元素从上到下的布局方式
文档流：在一个页面中，在文档流中的元素都有自己的位置，如果某个元素脱离了文档流，那么它将不再参与流式布局，不再拥有自己的位置。
块元素 如果脱离了文档流，那么它将不再参照父元素的宽度定宽，所以脱离文档流的块元素，如果没有内容，则必须设置宽高，如果有内容，那么它的宽高将取决于它内容的宽高。

position表示元素的定位方式

• static

表示静态定位，也是元素默认的定位方式，参与流式布局（在文档流中），不能设置位置

• relative
  表示相对定位（相对于自身原有的位置进行定位的）,不会脱离文档流，依旧参与流式布局，原有的位置依旧还在

• absolute
  表示绝对定位（绝对定位会使元素脱离文档流，不再参与流式布局，即在文档流中不再拥有自己的位置）,它会先查看它的父元素是否为静态定位static(也就是没有设置定位)，如果不是，就相对于父元素进行定位，如果是静态定位static(也就是没有设置定位)，那么就查看它父元素的父元素是否为静态定位，一直查找到不是静态定位为止，如果查找到html都为静态定位，就相对于html页面进行定位。
  所以，如果想让一个元素相对于它的父元素进行定位，那么就把它的父元素定位方式设置成非静态定位即可，一般情况下设置成relative相对定位，因为相对定位不会破坏父元素的流式布局

• fixed
  表示固定定位，会使元素脱离文档流，不再参与流式布局，在文档流中将没有它的位置