position的應用及結構

2021-08-13 08:02:24 字數 780 閱讀 3156

position:relative; 相對定位:

1、不影響元素本身的特性;

2、不使元素脫離文件流(元素移動之後原始位置會被保留);

3、如果沒有定位偏移量,對元素本身沒有任何影響

4、提公升層級

定位元素位置控制

top/right/bottom/left 定位元素偏移量。

position:absolute; 絕對定位

1、使元素完全脫離文件流;

2、使內嵌支援寬高;

3、塊屬性標籤內容撐開寬度;

4、如果有定位父級相對於定位父級發生偏移,如果定位父級相對於document發生偏移;

5、相對定位一般都是配合絕對定位元素使用;

6、提公升層級

7、相對於父級元素進行定位

z-index:[number]; 定位層級

1、定位元素預設後者層級高於前者;先顯示層級高的

2、建議在兄弟標籤之間比較層級

fixed固定定位、定位其他

position:fixed; 固定定位

與絕對定位的特性基本一致,差別是始終相對於整個文件進行定位;問題:ie6不支援固定定位。

定位其他值:

position:static;預設值

position:inherit; 從父元素繼承定位屬性的值(不相容)

position:relative | absolute | fixed | static | inherit;

fix一般用於返回頂部這種固定於整個頁面的元素

position簡單應用

今天是第一次寫部落格,就寫一點關於對position標籤的小總結。對於標籤的意思就不在解釋,這裡主要通過一些些細節方面來展現fixed,relative,absolute這三個標籤,當然這都是我自己的理解,可能會有錯誤,僅供參考。因為這個樣式是修飾div這種標籤的,是有大小的,因為我們在使用的時候務...

HTML的position屬性簡單應用

一 position的應用場景 position有多個值,其中三個經常用的到分別 relativeabsolutefixed。absolute絕對定位,相對於父級並且父級設定了relative進行定位。如果父級沒有設定relative使用margin top屬性的時候,會讓父級隨之變動。如下 cha...

Position的屬性和屬性值及差別

position的四個屬性 1.relative 生成相對定位的元素,通過top,bottom,left,right的設定相對於其正常 原先本身 位置進行定位。可通過z index進行層次分級。2.absolute 生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。元素的位置...