首先，我重新学习一下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 的效果。

版权声明：本文为zhangshiliang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zhangshiliang/p/6716069.html