<style type="text/css">
div{
width:200px;
height:100px;
background:#00F;
}
#div1{
background:#CF0;
position:relative; /*相对定位,是相对于该元素之前的位置做出的位置的变化
;不会破坏文档流*/
left:10px;
top:10px;
}
#div2{
background:#F00;
position:absolute;/*绝对定位,是相对于其父元素左上角的定位;会破坏文档流,后面的元素会来补位*/
left:200px;
top:200px;
}
#div3{
position:fixed;
left:45%;
top:50%;
}
</style>
</head>
<body>
<div></div>
<div id="div1">相对定位</div>
<div id="div2">绝对定位</div>
<p>内容内容</p></br></br></br></br></br></br></br>
<p>内容内容</p></br></br></br></br></br></br></br>
<p>内容内容</p></br></br></br></br></br></br></br>
<p>内容内容</p>
<div id="div3">固定定位</div>/*固定定位是相对于浏览器来说的,会一直固定在浏览器当前窗口位置*/
</body>
css定位.gif
