CSS魔法堂 Position定位詳解

一、position各屬性值詳解

1.  static

：預設值，元素將按照正常文件流規則排列。

2.  relative：相對定位，元素仍然處於正常文件流當中，但可以通過left、top、right和bottom的css規則來改變元素的位置。

注意點：[a]. 元素原來位置將保留，不被其他元素所佔據;

[b]. 當使用left，top改變元素位置時，元素將以原來位置的border外邊框的左上角作為參考點 ;

[c]. 當使用right、top時改變元素位置時，元素將以原來位置的border外邊框的右上角作為參考點 ;

[d]. 當使用left、bottom時改變元素位置時，元素將以原來位置的border外邊框的左下角作為參考點 ;

[e]. 當使用right、bottom時改變元素位置時，元素將以原來位置的border外邊框的右下角作為參考點 ;

注意點：[a]. 元素將不再佔據原有位置;

此處定義 變數x，以下內容將使用x代替參考點

條件：當元素的offsetparent為body而且body沒有進行css定位，則x=頁面;

其他情況，x=offsetparent的padding外邊框。

[b]. 當使用left，top改變元素位置時，元素將以x的左上角或作為參考點 ;

[c]. 當使用right、top時改變元素位置時，元素將以x的右上角作為參考點 ;

[d]. 當使用left、bottom時改變元素位置時，元素將以x的左下角作為參考點 ;

[e]. 當使用right、bottom時改變元素位置時，元素將以x的右下角作為參考點 ;

：固定定位，元素脫離正常文件流，可通過left、top、right和bottom的css規則來改變元素的位置

注意點：[a]. 元素將不再佔據原有位置;

[b]. 以瀏覽器的可視區域的四角作為參考點。

[c]. ie5.5~6不支援該屬性值。

可使用js來修復，對於拖動滾動條元素閃鑠的bug需要通過下列的css來處理。

* html

body

有三種情況將使得元素脫離文件流，分別是浮動(float left or right)、絕對定位(position:absolute)、固定定位(position:fixed)。

三、何謂css定位

css定位，就是元素的position不為static。而該元素將成為其親子元素的offsetparent，也有機會成為其孫元素的offsetparent。

四、總結

五、參考

如果您覺得本文的內容有趣就掃一下吧！捐贈互勉！

CSS魔法堂 Position定位詳解

一 position各屬性值詳解 1.static 預設值，元素將按照正常文件流規則排列。2.relative 相對定位，元素仍然處於正常文件流當中，但可以通過left top right和bottom的css規則來改變元素的位置。注意點 a 元素原來位置將保留，不被其他元素所佔據 b 當使用lef...

CSS魔法堂 Position定位詳解

一 position各屬性值詳解 1.static 預設值，元素將按照正常文件流規則排列。2.relative 相對定位，元素仍然處於正常文件流當中，但可以通過left top right和bottom的css規則來改變元素的位置。注意點 a 元素原來位置將保留，不被其他元素所佔據 b 當使用lef...

CSS魔法堂 Position定位詳解

一 position各屬性值詳解 1.static 預設值，元素將按照正常文件流規則排列。2.relative 相對定位，元素仍然處於正常文件流當中，但可以通過left top right和bottom的css規則來改變元素的位置。注意點 a 元素原來位置將保留，不被其他元素所佔據 b 當使用lef...