理解css中的position-static\relative\fixed\absolute

position属性有四个值：

static（静态定位）：是默认值，不会被特殊的定位，遵循正常的文档流对象，对象占用文档空间，该方式下，top、right、bottom、left、z-index等属性无效。

relative(相对定位)：不添加额外属性的情况下，和static表现一样，当使用top、bottom、left、right的的时候，会使其偏离正常位置。而其他的元素不会调整位置来弥补它偏离后剩下的空隙。当元素设置了margin\padding属性后，会占据文档空间，影响其他元素。

.div1{

position:relative;

top:20px;

width:100px;

height:100px;

margin-bottom:20px;

}

.div2{

width:100px;

height:100px;

}

在div1增加了top属性后，div1向下移动20px，对div2不产生影响。当div1增加margin-bottom属性后，div2向下移动20px。

 

absolute（绝对定位）：

绝对定位是相对于最近的"positioner"祖先元素。如果绝对定位的元素没有"positioned"祖先元素，那么它是相对于html元素，并且会随着页面滚动而移动。"static"和"relative"是相对于"body"标签为定位原点。body和html元素相差9px左右。"positioned"元素是指position不是"static"的元素。

absolute定位的元素脱离了文档流。

在设置了absolute定位后，需要设置至少一个left\right\top\bottom中的一个值，不然会默认为relative。在同时设置top和bottom的时候，top有效。同时设置left和right的时候，left有效。

绝对定位元素是根据祖先元素的border来进行定位，即绝对定位元素是相对祖先元素的margin位置来进行定位。

 

fixed(固定定位)：

固定定位是相对于视窗来定位，即使页面滚动，它仍会停留在相同的位置。top、bottom、left、right属性都有效。固定定位元素不保留它原在页面应有的空隙。

 

文档流的定义即按照从左到右从上到下的顺序排放元素。