CSS定位網頁中的元素

2022-08-17 19:27:22 字數 1300 閱讀 4346

relative相對定位

偏移設定:left、

right

、top

、bottom

值單位:

px元素的規律:

相對定位元素的規律

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

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

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

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

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

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

使用場景:

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

absolute絕對定位

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

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

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

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

特性:絕對定位是相對定位父級的位置來定位,如果沒有設定定位父級,則相對瀏覽器視窗來定位。

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

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

設定絕對定位的元素

脫離文件流

使用場景:

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

fixed屬性值

偏移設定:left、

right

、top

、bottom  

值單位:

px類似絕對定位,不過區別在於定位的基準不是祖先元素,而是

瀏覽器視窗

z-index屬性

調整元素定位時重疊層的上下位置

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

0設定了position屬性時,

z-index

屬性可以設定各元素之間的重疊高低關係

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

網頁元素透明度

屬性:opaction  filter

opaction:x; x值[0 ,1],值越小越透明

filter:alpha(opacity=x); x值[0 ,100],值越小越透明

CSS3中定位網頁元素

一.position屬性定位網頁元素 1.static 預設值,沒有定位。按照標準文件流的方式提現出來 2.relative 相對定位,相對於自身元素原來的位置進行定位 注意 當top的值為正值時向下移動 當為負值時向上移動 當left的值為正值時向右移動 當為負值時向左移動 相對定位的規律 1.設...

CSS3 定位網頁元素

1.定位在網頁中的應用 css中有三種基本的定位機制,分別是標準流 浮動 絕對定位 2.position屬性 position指定盒子的位置,指它相對其父級的位置或相對它自身應該在的位置。static 預設值,保持在原本應該在的位置,沒有任何移動的效果 relative 相對定位,常以標準文件流的排...

定位網頁元素

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