定位網頁元素

2022-09-02 23:36:27 字數 1420 閱讀 4503

一.position屬性定位網頁元素

1.static :預設值,沒有定位。按照標準文件流的方式提現出來

2.relative:相對定位,相對於自身元素原來的位置進行定位

注意:當top的值為正值時向下移動

當為負值時向上移動

當left的值為正值時向右移動

當為負值時向左移動

相對定位的規律:

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

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

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

3.absolute:絕對定位

絕對定位的規律:

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

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

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

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

4.fixed:固定定位:以瀏覽器為基準進行固定定位

類似絕對定位,不過區別在於定位的基準不是祖先元素,而是瀏覽器視窗

5.定位總結:

5.1 相對定位的特性

相對於自己的初始位置來定位

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

層級提高,可以把標準文件流中的元素及浮動元素蓋在下邊

5.2 相對定位的使用場景

相對定位一般情況下很少自己單獨使用,都是配合絕對定位使用,為絕對定位創造定位父級而又不設定偏移量

5.3 絕對定位的特性

絕對定位是相對於它的定位父級的位置來定位,如果沒有設定定位父級,則相對瀏覽器視窗來定位

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

層級提高,可以把標準文件流中的元素及浮動元素蓋在下邊

設定絕對定位的元素脫離文件流

5.4 絕對定位的使用場景

一般情況下,絕對定位用在下拉列表、焦點圖輪播、彈出數字氣泡、特別花邊等場景

5.5 固定定位的特性

相對瀏覽器視窗來定位

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

5.6 固定定位的使用場景

一般在網頁中被用在視窗左右兩邊的固定廣告、返回頂部圖示、吸頂導航欄等

二.z-index:調整元素定位時重疊層的上下位置

z-index屬性值:整數,預設值為0

設定了positon屬性時,z-index屬性可以設定各元素之間的重疊高低關係

z-index值大的層位於其值小的層上方

1.設定透明度

opacity:x    x值為0~1,值越小越透明    opacity:0.4;

filter:alpha(opacity=x)    x值為0~100,值越小越透明    filter:alpha(opacity=40);

定位網頁元素

定位網頁元素 一 網頁的定位機制 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 相對定位,元素以自身原來位置進行定位 如果設定元素浮動,那麼會以浮動後的位置作為原來的位置 規律 設定相對定位的盒子會相對它原來的位置,通過指定偏移,到達新的位置...