css 定位(相對定位與絕對位置)

可以使用 position:relative 對元素從排列順序的當前位置進行位移
可用position:absolute 對元素從排列順序的當前位置或依照定位最近的祖先元素進行位移
用position:fixed 對元素參照視窗進行位移

浮動與清除

問題：想把一個元素從正常排列順序中移除，並令它靠父元素的左側或右側顯示。想把它當作塊狀元素來解析，並排列在父元素內邊距所包圍的地區裡。還想讓它的頂部基於原始提取位置進行排列。還想控制鄰近的其他浮動元素或非浮動內容，或把它們移到自己的下面。

解決方案：

使用float:left和float:right
用float:none覆蓋其他元素進行浮動定位的規
浮動元素的定位層位置塊狀元素之上，與正常排列中的內聯內容是相鄰的。左浮動是對它的右側內容縮排，右浮動是對它的左側內容縮排。
浮動不影響塊狀盒模型的定位，隻影響它們的內聯內容。
用clear:left把浮動元素左側的塊狀元素或其他浮動元素移到它的下面
用clear:right把浮動元素右側的塊狀元素或其他浮動元素移到它的下面
用clear:both把浮動元素兩側的塊狀元素或其他浮動元素同時移到下面

相對浮動

問題：想在不影響其他元素（包括其他浮動元素和內聯內容）定位的前提下，把浮動從現在位置上位移。你還想控制浮動元素的（浮動元素之間或與其他定位元素之間）堆疊順序。

解決方案：用position:relative對浮動元素進行相對定位。相對浮動還保留了元素在原始浮動排列順序中的位置，只是用left和top將它從原來的位置上做一定的位移。相對浮動也是在定位層被解析的，它允許你用z-index控制它相對於其他浮動元素和定位元素的堆疊順序。因為相對浮動也是對元素的一種定位方式，所以它的絕對後代可相對於它來進行定位。

 

層級關係為：
<div ——————————— position:relative; 不是最近的祖先定位元素，不是參照物
<div—————————-沒有設定為定位元素，不是參照物
<div———————- position:relative 參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：

 

 

為改變參照物（橘色框）後的效果
層級關係為：
<div ——————————— position:relative;最近的祖先定位元素，參照物
<div—————————-沒有設定為定位元素，不是參照物
<div———————-沒有設定為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：

 

 

參照物為最頂級的元素情況。
層級關係為：
<div ———————————沒有設定為定位元素，不是參照物
<div—————————-沒有設定為定位元素，不是參照物
<div———————-沒有設定為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果圖：

 

 

 

 

僅使用margin屬性布局絕對位置元素的情況
此情況，margin-bottom 和margin-right的值不再對文檔流中的元素產生影響，因為該元素已經脫離了文檔流。另外，不管它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上位移參照物。  
圖9中，使用margin屬性布局相對定位元素。
層級關係為：
<div ——————————— position:relative; 不是參照物
<div—————————-沒有設定為定位元素，不是參照物
<div———————-沒有設定為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果圖：

 

 

IE6的情況下，box2前面沒有兄弟節點，則margin-left的值會出現雙倍邊距，見圖10。
層級關係為：
<div ——————————— position:relative; 不是參照物
<div—————————-沒有設定為定位元素，不是參照物
<div———————-沒有設定為定位元素，不是參照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果圖：