相对布局和绝对布局

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