首先,我重新学习一下CSS 2.1规范中
其中原文是这样子的: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... 的“猿猴行为”再也熟悉不过了。那木,鄙“猿”对此整理下:
- 元素隐藏:
position:absolute; top: -1000px;
无需relative帮忙(其实,默认相对body元素定位)
- 垂直居中:
.container{position:relative; ...}.item{position:absolute; top:50%; margin-top:-10px; height:20px; width...}
margin-top = -1/2(height)
- 对下拉列表,菜单等动态效果进行定位显示,同时又达到不影响 later siblings 的效果。