? 1、div+css中的定位position 最主要的兩個(gè)屬性：absolute(絕對(duì)定位)、relative(相對(duì)定位)

?? （1）absolute(絕對(duì)定位)，位置將依據(jù)瀏覽器左上角開始計(jì)算。 絕對(duì)定位使元素脫離文檔流，因此不占據(jù)空間。

?? （2）relative(相對(duì)定位)，定位是相對(duì)的，那他是相對(duì)于什么呢？參照物是什么？

?? 看代碼：

<span style="font-size:18px;"><style type="text/css">#left{background:#cccccc;width:200px;height:200px;float:left;}#center{background:#eee;width:200px;height:200px;float:left;}#right{background:#666666;width:200px;height:200px;float:left;}
</style><div id="left"></div><div id="center"></div><div id="right"></div>
</span>

? 效果：

?????

? 2、relative(相對(duì)定位)，給中間的div增加定位屬性：position:relative; top:10px; left:10px;

? 代碼：

<span style="font-size:18px;"><style type="text/css">#left{background:#cccccc;width:200px;height:200px;float:left;}#center{background:#eee;width:200px;height:200px;float:left;position:relation;top:<span style="font-family:KaiTi_GB2312;">1</span>0px;left:<span style="font-family:KaiTi_GB2312;">1</span>0px;}#right{background:#666666;width:200px;height:200px;float:left;}
</style><div id="left"></div><div id="center"></div><div id="right"></div></span>

? 效果：

?????

? 結(jié)果：很明顯它現(xiàn)在移動(dòng)的參照物就是它原來(lái)所占據(jù)的位置

? 注意：位置屬性 top、 right 、left 、bottom 只能引用相鄰的兩個(gè)邊，不能只用上下，或者只用左右。

? 3、absolute(絕對(duì)定位)，給中間的div增加定位屬性：position:absolute; top:30px; left:30px;

? 代碼：

<span style="font-size:18px;"><style type="text/css">#left{background:#cccccc;width:200px;height:200px;float:left;}#center{background:#eee;width:200px;height:200px;float:left;position:absolute;top:30px;left:30px;}#right{background:#666666;width:200px;height:200px;float:left;}
</style></span>

? 效果：

?????

? 結(jié)果：

? 發(fā)現(xiàn)中間的div脫離了文檔流，右側(cè)的和左側(cè)div挨著了，現(xiàn)在中間的div的位置是從瀏覽器的左上角開始計(jì)算位置即向下移動(dòng)30像素，向右移動(dòng)30像素。現(xiàn)在就涉及到一個(gè)層級(jí)的關(guān)系，設(shè)置div的z-index屬性，數(shù)值越大的，層顯示在最上邊。

?? 想要了解更多的小伙伴們可以點(diǎn)擊這里：

?? CSS 相對(duì)|絕對(duì)(relative/absolute)定位系列（一）