position的用法以及遇到的問題

2022-09-13 02:00:21 字數 800 閱讀 8238

position:static|relative|absolute|fixed

static:position預設值。忽略top,right,bottom,left,z-index;可用於取消元素的定位

relative:相對定位。相對於自身的位置進行定位。

1.沒有設定top,right,bottom,left,預設的位置就是本來未定位的位置;或者是相當於樣式值為static;

2.設定top,right,bottom,left後,他的位置就是相對本來位置進行偏移,且原來的位置會儲存;

absolute:絕對定位。相對於有定位的祖先元素進行定位;若祖先元素都沒有設定除static的定位,則相對於可視區定位;設定後,該元素就是乙個塊級元素

1.有祖先元素定位(非static),設定了top,right,bottom,left,該元素相對於祖先定位元素進行定位

2.有祖先元素定位(非static),沒有設定top,right,bottom,left,該元素跟定位前的位置一樣;或者是相當於樣式值為static;

3.沒有祖先元素定位,設定了top,right,bottom,left,該元素相對於可視區進行定位

4.沒有祖先元素定位,沒有設定top,right,bottom,left,該元素跟定位前的位置一樣

fixed:固定定位。相對於瀏覽器視窗進行定位(與是否有祖先定位元素無關)

1.設定了top,right,bottom,left,該元素相對於瀏覽器視窗進行定位(位置值始終固定)

2.沒有設定top,right,bottom,left,該元素跟定位前的位置一樣;或者是相當於樣式值為static;

position基本用法

position relative 相對定位 a 不影響元素本身的特性 b 不使元素脫離文件流 元素移動之後原始位置會被保留 c 如果沒有定位偏移量,對元素本身沒有任何影響 d 提公升層級 定位元素位置控制 top right bottom left 定位元素偏移量。position absolut...

position和dispaly的用法

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

定位布局position的具體用法

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