CSS：static/relative/absolute

static - default and this is the FLOW.

-------------------------------------------------------------------------------------------------------------------------

relative - postition determined by first STATIC element.

top、bottom、left、right

保持文档流，占空间——保留自己在z-index:0层的占位。通过设置top、right、bottom、left值相对本身的原始位置发生位移。postition:relative不会改变display类型。

在使用相对定位是，无论是否移动，元素仍然会占据原来的空间。因此，移动元素可以覆盖页面上的其他框。可以通过设置z-index属性来控制这些框的叠放次序。z-index值越高，框在栈中的位置就越高。

-------------------------------------------------------------------------------------------------------------------------

absolute - position determined by first NON-STATIC element.

top、bottom、left、right

脱离文档流，不占空间——不在z-index:0层保留占位符。通过设置top、right、bottom、left值相于距自己最近的非static祖先元素发生位移。（如果祖先元素全都没有设置，那就是相对body元素）position:absolute（和float）会隐性改变display类型为display：inline-block方式显示。

注：display:inline-block

      inline-block 元素创建了一个行级的块容器，该元素内部（内容）被格式化成一个块元素，同时元素本身则被格式化成一个行内元素。

      简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，         使其既具有block的宽度高度特性又具有inline的同行特性。

 

      

 relative & abusolute相同点：

两个参数都能改变对应元素在文档中的位置，并激活元素的top、right、bottom、left和z-index属性。