css布局例子实战
<html>
<head>
<style type="text/css">
#main{
position:absolute;/*fixed/relative/static*/
left:90px;
top:100px;
}
#first{
position:absolute;
left:90px;
top:100px;
}
#third{
position:absolute;
left:120px;
top:100px;
}
h2.pos_abs
{
position:absolute;
left:90px;
width:180px;
top:100px
}
</style>
</head>
<body>
<div id="main">
<div id="first">
test</div>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<div id="third">
test3</div>
</div>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 90px，距离页面顶部 100px。</p>
</body>
</html>
通过这段代码，通过改变布局定位方式来观察可以知道。
1.relative:是相对于自身在正常文档流中的位置进行偏移。relative中的absolute会相对于它这个relative父容器偏移。
2.absolute父容器中的所有absolute子元素都是相对于它们的absolute父容器偏移。
3.fixed和absolute都会脱离正常的文档流
4.父容器为relative的absolute元素依然脱离文档流。
5.父容器为absolute的relative元素依然处于以该absolute为父容器的文档流之中。
总结：由此可见在整体主页面布局时，在absolute 为父容器嵌套一些relative子元素是一种不错的选择。当然，现在布局更多的使用bootstrap框架来实现。
