XML/HTML Code复制内容到剪贴板
<div id="box">box </div>
<div id="fixed">fixed</div>
CSS Code复制内容到剪贴板
#box{
margin:40px auto;
width:400px;
height:400px;
border:2px red solid;
position:fixed;
left:100px;
top:100px;
}
#fixed{
height:4000px;
}
当把box定义为固定定位时，box永远都是在浏览器窗口内，fixed属性还可通过left，right,top,bottom来控制从流浪器不同边框来进行定位。
相对定位(relative)与绝对定位(absolute)：
XML/HTML Code复制内容到剪贴板
<div id="box">box
<div id="boxA">boxA</div>
<div id="boxB">boxB
<div id="boxC">boxC</div>
<div id="boxD">boxD</div>
</div>
</div>
如果box把 position属性定义为relative，只有它的子元素boxA和boxB position属性定义为absolute才能相对box定位，而他的孙子元素boxC和boxD把position定义为absolute并不能相对box来定位。但是如果把boxB的position属性定义为relative，它底下的子元素boxC和boxD就能相对于父元素boxB来定位，所以，把position属性定义为relative的元素，只有它的子元素才能相对它定位，孙子元素并不能相对它定位。相对定位与绝对定位的结合使用可以更加精确的控制网页元素，设计出更强大的布局效果。
position属性定位小工具：www.linxz.de/css_tool/position_demo.html
层叠：
css可以通过z-index属性来排列不同定位元素之间的层叠顺序，该属性可以设置任何整数值，数值越大，所排列的顺序越靠前。
XML/HTML Code复制内容到剪贴板
<div id="box">box
2 <div id="boxA">boxA</div>
3 <div id="boxB">boxB</div>
4 <div id="boxC">boxC</div>
5 </div>
CSS Code复制内容到剪贴板
#boxA,#boxB,#boxC{
width:100px;
height:200px;
position:absolute;
}
#boxA{
background: #086499;
z-index:1;
left:100px;
}
