常用的定位position

2021-10-09 20:25:09 字數 648 閱讀 7452

1.定位的元素往往還需要配合使用left、right、top、button來進行最終位置確認,如果設定值為百分比,則參照『定位參照物』的寬/高來計算。

2.元素固定定位或絕對定位後,脫離普通文件流,如果和普通文件流有交叉,定位的元素會覆蓋普通文件流內容

3.元素固定定位或絕對定位後,不管原來是什麼型別的盒子,定位後具有包裹性、設定寬高有效。

4.元素固定定位或絕對定位後,如果寬/高設定百分比,則計算的參照是:定位參照物的寬/高

5.多個元素固定定位或相對定位後,有可能出現盒子相互覆蓋(預設後定位的會覆蓋前面的)的情況,我們可以用z-index屬性,給定整數來確定相互之間覆蓋順序,數越大越往上面

(1)static 定位預設值

(2)相對定位 relative

參照物是元素自身本該出現的位置 。

平時使用相對定位的原因,1.希望自身相對原本的位置發生偏移 2.單純想作為某一後代元素絕對定位的參照物,自身並不想做任何偏移。

(3)固定定位 fixed (ie6不相容)

參照物是瀏覽器的可視區域。固定定位的元素不會隨滾動條滾動

(4)絕對定位 absolute

定位的參照物是離他最近的、設定了position為relative、fixed、absolute之一的祖先元素

定位和position定位

定位有 普通流定位 浮動定位 相對定位 絕對定位 固定定位 特點普通定位 被稱為文件流定位,是頁面元素預設的定位方式 塊級 從上到下,獨佔一行 行級 從左到右,不獨佔一行 浮動定位 1.浮動元素脫離文件流,未浮動元素上前補位 2.浮動元素會停靠在父級元素的左邊或者右邊,亦或者緊跟其他元素邊緣 3.浮...

position定位屬性

position定位屬性設定值 absolute 絕對定位 脫離原普通流 依據父級 祖先級元素的位置進行定位 如果沒有父級元素,則參照body進行定位 relative 相對定位 相對於原位置的定位,仍然佔據原先普通流的位置 static 元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,...

position定位說明

1 定位類別 static 靜態 沒有特別的設定,遵循基本的定位規定,不能通過z index進行層次分級。relative 相對定位 物件不可層疊 不脫離文件流,參考自身靜態位置通過 top,bottom,left,right 定位,並且可以通過z index進行層次分級。absolute 絕對定位...