相对布局和绝对布局

position属性有四个值，static（默认值），fixed，relative（相对）和absolute（绝对）。

relative是相对于当前位置进行定位，如果将top和left设为0，那么就是当前的位置，并且relative不脱离文档流占据位置：

如图中这两个盒子一开始设置为相对布局top与left都设为0，结果和没设置定位的位置一样；

absolute是基于父元素来定位，并且脱离文档流不占据位置，所以父元素也要设置position，不然会脱离父元素

如图所示，将红色盒子设为absolute，top=0=left，蓝色盒子不设置定位，红色盒子浮动到了蓝色盒子上方；

fixed是以浏览器窗口来定位，并不依赖于父元素，同样也脱离文档流，不占据位置：

可以看到将粉盒子设为fixed后脱离了html元素，只相对于窗口定位；

注意：如果仅仅只设置了position，没有设置top或left此类的具体定位，元素只会在当前位置发生变化，如果是relative则没有变化，absolute和fixed则只是脱离文档流，浮在当前位置的上方，下方的元素则会移动到该位置；

转载于:https://www.cnblogs.com/cjw-ryh/p/6909655.html