定位網頁元素

2022-08-24 18:03:12 字數 885 閱讀 2228

一.定位網頁元素

position :

1.static :預設值,代表沒有定位,元素沒有定位會以標準文件流方式展現出來

2.relative  :相對定位,元素以自身原來位置進行定位(如果設定元素浮動,那麼會以浮動後的位置作為原來的位置)

規律:設定相對定位的盒子會相對它原來的位置,通過指定偏移,到達新的位置

設定相對定位的盒子仍在標準文件流中,它對父級盒子和相鄰的盒子都沒有任何影響

設定相對定位的盒子原來的位置會被保留下來

3.absolute :絕對定位,元素以離他最近的已經定位的祖先元素進行定位,如果沒有祖先元素定位,那麼會以瀏覽器視窗進行定位

使用了絕對定位的元素以它最近的乙個「已經定位」的「祖先元素」 為基準進行偏移

如果沒有已經定位的祖先元素,會以瀏覽器視窗為基準進行定位

絕對定位的元素從標準文件流中脫離,這意味著它們對其他元素的定位不會造成影響

元素位置發生偏移後,它原來的位置不會被保留下來

4.fixed :基於瀏覽器視窗進行定位,不會隨著滾動條的移動而改變位置

相對瀏覽器視窗來定位

偏移量不會隨滾動條的移動而移動

元素偏移方向:

如果想讓元素向上移動,那麼top屬性寫賦值,或者bottom屬性寫正值

如果想讓元素向下移動,那麼bottom屬性寫賦值,或者top屬性寫正值

如果想讓元素向左移動,那麼left屬性寫賦值,或者right屬性寫正值

如果想讓元素向右移動,那麼right屬性寫賦值,或者left屬性寫正值

二.設定定位元素的層疊

z-index:預設為0 值越大層級越上

opacity :0-1 值越小越透明

filter:alpha(opacity=x):0-100 值越小越透明

定位網頁元素

定位網頁元素 一 網頁的定位機制 1.網頁中的三種定位機制 a 標準文件流 b 浮動float c 絕對定位 2.僅用浮動和盒子模型,無法實現特定情況下的複雜定位 a 右上角的關閉按鈕效果 b 固定在右下角的回頂部 c 滑鼠移上去的下拉效果 3.position屬性實現元素的定位 position ...

定位網頁元素

定位屬性position static 預設值,沒有定位 relative 相對定位 third 例 偏移設定 top 上 left 左 right 右 bottom 下 偏移位置設定是距離設定方向的邊框的距離 在邊框內是正 absolute 絕對定位 使用了絕對定位的元素以它最近的乙個 已經定位 ...

定位網頁元素

一.定位網頁元素 position 1.static 預設值,代表沒有定位,元素沒有定位會以標準文件流方式展現出來 2.relative 相對定位,元素以自身原來位置進行定位 如果設定元素浮動,那麼會以浮動後的位置作為原來的位置 規律 設定相對定位的盒子會相對它原來的位置,通過指定偏移,到達新的位置...