CSS3 定位網頁元素

2021-09-28 17:18:43 字數 1597 閱讀 9083

1.定位在網頁中的應用

css中有三種基本的定位機制,分別是標準流、浮動、絕對定位

2.position屬性

position指定盒子的位置,指它相對其父級的位置或相對它自身應該在的位置。

static:預設值,保持在原本應該在的位置,沒有任何移動的效果

relative:相對定位,常以標準文件流的排版方式為基礎,使盒子相對於它在原本的標準位置偏移指定的距離。盒子仍在標準文件流中。

規律:

relative相對定位的盒子會相對於它原來(初始)的位置,通過指定的偏移量,到達指定位置;

(1)設定相對定位的盒子仍在標準文件流中,它對父級盒子和相鄰的盒子都沒有任何影響(層級提高,可以把標準文件流的元素及浮動元素蓋在下邊)

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

使用場景:

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

absolute:絕對定位,盒子位置以包含它的盒子為基礎進行偏移,絕對定位的盒子從標準文件流中脫離。意味著對其他盒子的定位沒有影響。

結論:(1)使用了絕對定位的元素(第二個盒子)以它最近的乙個已經定位(position屬性被設定除static以外的任意一種方式)的祖先(從文件流的任意節點開始,走到根節點,經過的所有節點都是它的祖先,其中直接上級節點是它的父節點,以此類推)元素(#father)為基準進行偏移。如果沒有已經定位的祖先元素,那麼會以瀏覽器視窗為基準進行定位

(2)絕對定位的元素(第二個盒子)從標準文件流中脫離,這意味著它們對其他元素(第乙個、第三個盒子)的定位不會造成影響(層級提高,可以把標準文件流中的元素及浮動元素蓋在下邊)

(3)設定絕對定位的盒子原來的位置不會被保留

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

fixed:固定定位,以瀏覽器視窗為基準進行定位,當拖動瀏覽器視窗的滾動條時,依然保持物件位置不變。

特性:(1)基準於瀏覽器視窗

(2)偏移量不會隨著滾動條的移動而移動

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

注:以上四個值需要指定一定的偏移量,水平方向用left(正值向右)或right(正值向左)屬性,垂直方向使用top(正值向下)或bottom(正值向上)屬性

3.z-index屬性

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

在立體空間中表示垂直於頁面方向的z軸。值為整數,可為正可為負。預設為0,值大的位於值小的上方。當兩個值相同時,保持原來的高低覆蓋關係

設定層的透明度

(1)opacity:x; x值0~1,值越小越透明

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

網頁中的元素都含有兩個堆疊層,乙個是未設定絕對定位時所處的環境,這時所有層的z-index屬性值總為0;另乙個是設定絕對定位時所處的堆疊環境,這個環境所處的位置由z-index屬性來指定

CSS3中定位網頁元素

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

CSS3美化網頁元素

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

CSS定位網頁中的元素

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