CSS魔法堂 Position定位詳解

2021-09-23 21:35:34 字數 1722 閱讀 1700

一、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外邊框的右下角作為參考點 ;

3.  absolute:絕對定位,元素脫離正常文件流,可通過left、top、right和bottom的css規則來改變元素的位置

注意點:[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的右下角作為參考點 ;

4.  fixed

:固定定位,元素脫離正常文件流,可通過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...