absolute系列之基本功能

首先，我重新学习一下CSS 2.1规范中Visual formatting model>Position scheme.

其中原文是这样子的：In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

大概意思是：脱离文档流（normal flow）（对后面的同级元素（later siblings）没有影响）；相对于包含块（containing block）进行分配位置。

对其作用基本了解后，就开始程序猿的生活了。。。

 想必大家对 relative+absolute+top... 的“猿猴行为”再也熟悉不过了。那木，鄙“猿”对此整理下：

1. 元素隐藏：

   position:absolute; top: -1000px;
   

   无需relative帮忙（其实，默认相对body元素定位）

2. 垂直居中：

   .container{position:relative; ...}
   .item{position:absolute; top:50%; margin-top:-10px; height:20px; width...}
   

   margin-top = -1/2(height)

3. 对下拉列表，菜单等动态效果进行定位显示，同时又达到不影响 later siblings 的效果。