二.绝对定位
绝对定位比相对定位更灵活。
绝对定位的盒子,是脱离标准文档流的。所以,所有的标准文档流的性质,绝对定位之后都不遵守了。
绝对定位之后,标签就不区分所谓的行内元素、块级元素了,不需要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:负的宽度的一半。