布局模型 之 层模型（position的relativeabsolute与fixed区别？）

Posted 2020-10-04

  css的布局模型分为流动模型（Flow）、浮动模型（Float）、层模型（Layer）。

  浮动模型（Float）和层模型（Layer）有什么显著区别？

    浮动模型（Float）：浮动是让某元素脱离文档流的限制，在浮动框之前和之后的非定位元素会当它不存在一样，可能沿着它的另一侧垂直流动；浮动的元素仍然会占据文档流的物理空间。关于浮动模型的详细说明请看另一篇文章的介绍。http://ycgit.blog.51cto.com/8590215/1958452

  层模型（Layer）：设置为层模型的元素已从文档流删除，在文档流上层一层层覆盖，写在后面的层模型元素会覆盖前面层模型元素，层模型元素的定位与文档流无关，只基于带有定位属性（relative、absolute）的元素或视窗；

    position的relative、absolute与fixed区别？

  这三个定位属性是属于层模型的三种体现形式，另外任何元素都可以定位，不过绝对定位或固定定位元素会生成一个块级框（有块级元素特性，但不占整行），而不论该元素本身是什么类型。

  使用区别  

  relative 相对定位，以自己当前处于文档流的位置为基准设置偏移量，所以自身在文档流会保持占有固定的物理空间，并且物理空间的位置只受文档流的影响，而不受自身设置偏移量（top/left这些）影响，注意自身设置了margin这类非定位属性也一样改变其在文档流的物理位置。

  absolute 绝对定位，是相对于设置了position为relative或者absolute最近的父级元素定位（body、html标签也需要定位属性才能作为定位父级），如果没有就是基于视窗定位，不占文档流的物理空间。

  fixed 固定定位，是相对于浏览器视窗的，不占文档流的物理空间。