position基本用法

2021-07-10 18:44:29 字數 735 閱讀 4442

position:relative; 相對定位

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

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

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

d、提公升層級

定位元素位置控制

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

position:absolute; 絕對定位

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

b、使內嵌支援寬高;

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

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

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

f、提公升層級

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

a、定位元素預設後者層級高於前者;

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

fixed固定定位、定位其他

position:fixed; 固定定位

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

定位其他值:

position:static;預設值

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

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

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

position和dispaly的用法

position static 預設值,沒有定位 relative 沒有脫離文件流,相對於原來它的位置做定位,原本佔據的空間依然會保留 absolute 絕對定位,相對於離它最近的做過定位的祖先元素做定位。或者相對於html元素做定位 fixed 絕對定位,相對於瀏覽器視窗做定位,當頁面滾動,它的位...

定位布局position的具體用法

定位布局 position 1.static 靜態布局 當前元素在預設文件流中的位置 eg 寫好乙個div,div本身所處的位置 2.absolute 絕對定位 特點 1.脫離預設文件流 2.不佔據定位前空間 3.預設情況下,絕對定位元素根據body元素左上角進行定位 不要被元素本身的位置所迷惑 4...

position的用法以及遇到的問題

position static relative absolute fixed static position預設值。忽略top,right,bottom,left,z index 可用於取消元素的定位 relative 相對定位。相對於自身的位置進行定位。1.沒有設定top,right,botto...