揭开CSS的绝对定位真实的面纱（一）

二. 绝对定位

绝对定位比相对定位更灵活。

绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。

绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了：

代码如下：

1  span{ 2  position: absolute; 3  top: 100px; 4  left: 100px; 5  width: 100px; 6  height: 100px; 7  background-color: pink; 8  }

 

绝对定位要有一个参考点，绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角：

 

 

如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角：

 

 

绝对定位的盒子居中

绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。

 

1  width: 600px; 2  height: 60px;     position: absolute; 3  left: 50%; 4  top: 0; 5  margin-left: -300px;   → 宽度的一半

非常简单，当做公式记忆下来。就是left:50%; margin-left:负的宽度的一半。