要实现这个布局，就必须要学习css中的一个非常重要的定位属性：Position.它有三种可用值：static absolute relative .对于页面中的每一个元素来说，默认都是static 的。
如果将对象设置为absolute,那么对象将根据整个叶面的位置进行重新定位，当使用此属性时，可以使top,right,bottomleft来对上右下左4各方向的距离值，以确定对象的具体位置，
#layout {
postition :absolute ;
top:20px;
left:0px;
}
这个css决定了 id 为layout 的元素永远距离浏览器左边框0px,上边框20px,无论浏览器的大小多大。
也就是说当一个元素的position为absolute的时候，他将从本质上与其他对象分离出来，他的定位模式不会影响其他对象，也不会被其他对象的浮动定位所影响，从某种意义上来说，使用了绝对定位属性之后，对象就像一个图层一样浮动在了网页之上。
<style>
body{
margin:0px;
}
#left{
background-color:#cccccc;
border:2px solid #333333;
width:100px;
height:300px;
position:absolute;
top:0px;
left:0px;
}
#center{
background-color:#ccc222;
border:2px solid #333333;
height:300px;
margin-left:100px;
margin-right:100px;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
width:100px;
height:300px;
position:absolute;
right:0px;
top:0px;
}
</style>
</head>
<body>
<div id="left">左列</div>
<div id="center">中列</div>
<div id="right">右列</div>
