CSS3中定位網頁元素

2022-08-24 19:09:09 字數 1408 閱讀 9538

一.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);

CSS3 定位網頁元素

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

CSS3美化網頁元素

一.span標籤 能讓某幾個文字或者某個詞語凸顯出來 今天是11月份的第一天,地鐵卡不打折了 二.字型風格 font family 字型型別 font size 字型大小 font style 字型風格 font weight 字型粗細 font 風格 粗細 大小 型別 三.文字樣式 color 設...

CSS定位網頁中的元素

relative相對定位 偏移設定 left right top bottom 值單位 px元素的規律 相對定位元素的規律 設定相對定位的盒子會相對它原來的位置通過指定偏移,到達新的位置。設定相對定位的盒子仍在標準文件流中,它對父級盒子和相鄰的盒子都沒有任何影響 設定相對定位的盒子原來的位置會被保留...