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

二.绝对定位

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

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

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

代码如下：

1span{

2position: absolute;

3top: 100px;

4left: 100px;

5width: 100px;

6height: 100px;

7background-color: pink;

8}

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

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

绝对定位的盒子居中

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

1width: 600px;

2height: 60px;

position: absolute;

3left: 50%;

4top: 0;

5margin-left: -300px;   → 宽度的一半

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