CSS核心（四十一）元素标签定位方式之绝对定位 position:absolute
绝对定位于相对定位唯一不同的是：绝对定位相对于设置过定位的父元素或设置过定位的祖元素，如果前辈元素都没有设置过相对定位，那就相对浏览器。
绝对定位是脱离标准流的，即使用position:absolute;后立即失去原有的占位空间。
请看以下代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素标签定位方式之绝对定位 position:absolute</title>
</head>
<style>
.box{
width:500px;
height:500px;
background:#0f0;
/* 父元素相对定位,子元素绝对定位 */
position:relative;
left: 100px;
top: 100px;
}
.box1{
width:200px;
height:200px;
background:#f00;
margin-left:100px;
/* 绝对定位 脱离标准流 */
position:absolute;
/* 偏移 */
top:100px;
left:50px;
}
</style>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
显示结果如下：
解释一下：
在html中是一个div套着另一个div，即父子关系，我们给父div设置了相对定位，然后设置偏移，即：父元素相对自身向右偏移了100像素，向下偏移了100像素。
子元素高宽均为200像素，左外边距为100像素，此时，子元素的实际占用空间为高100，宽200。
然后又给子元素设置了绝对定位，并向下偏移100像素，向右偏移50像素。
由于父元素设置了相对定位，那么子元素便相对于父元素偏移，最终，子元素距离父元素的左边尺寸为100(子元素的左外边距)+50(子元素的偏移距离)=150像素，距离父元素的顶边为100像素。
总结：
一般而言，我们都是给父元素设置相对定位，给子元素设置绝对定位。因为相对定位不脱离标准流，可以约束子元素，然后通过绝对定位来控制子元素的偏移位置。
你会成为高手的，我衷心地祝福你。 很好啊，是真的啊看过了有好多的感慨啊！！！！！！！！！！！ 虽然我是一个外行,感受不是很深刻,但收益颇多!! 不错不错 我也是学计算机的，不过是新手。看了上面的贴子，很是热血沸腾。值得学习！ 让我深有感触,我要认真学习呀 中国太需要有志之士了,愿大家都共同努力吧! 不错不错。说出了我在大学的困惑和努力的方向。。谢谢！！ ^非常不错感触很深呀在写程序的迷茫中似乎又找到了点什么