關於CSS的定位屬性

2021-10-03 08:27:46 字數 2095 閱讀 5851

第三週

在逆戰班學習的第三週,通過這週的學習對前端有了進一步的理解,下面我鞏固複習一下本週學習的position定位屬性

static:預設值;沒有定位

relative:相對定位

absolute:絕對定位

fixed:固定定位

sticky:粘性定位

下面分別介紹各屬性值的作用:

static:預設值;沒有定位(可以用於取消元素之間的定位設定)

"div1">div1

"div2">div2

"div3">div3

如上**中div1設定了static預設值,此時div1中的top、left屬性無法生效效果如下所示:

relative:相對定位(參照物:自身位置)

相對定位是以自身位置進行偏移的,它並不會使元素脫離文件流,也就是說並不會影響網頁原本的布局。這時我們可以通過給予元素top、right、bottom、left屬性使其進行偏移。

"div1">div1

"div2">div2(此時相對原本自身左側偏移了50px,上方偏移了30px)

"div3">div3

如上**中,div2設定了相對定位,當我給它top和left屬性時,他就會相對於自身原本位置發生偏移,效果如下:

absolute:絕對定位(參照物:該元素的祖先元素)

絕對定位根據擁有定位屬性的祖先元素進行偏移,當沒有具有定位屬性的祖先元素時則相對於整個文件進行偏移。

注意:絕對定位屬性會使元素完全脫離文件流

當我們把上面演示中的div2改為絕對定位屬性,並不給予其偏移值時,div2會脫離文件流覆蓋到div3上方,效果如下:

因為此時div2並沒有祖父元素,所以我們給予其偏移值時會相對於整個文件偏移

"div1">div1

"div2">div2(此時div2相對於文件左側偏移50px,上方偏移30px)

"div3">div3

效果如下:

fixed:固定定位(參照物:相對於整個瀏覽器視窗)

固定定位屬性也會使元素完全脫離文件流,並相當於整個瀏覽器視窗進行偏移,不受到瀏覽器滾動條的影響不會受到祖先元素的影響。

如果此時我們給body乙個很高的高度,使網頁具有滾動條,當我們再給div2設定固定定位時div2不會因為滾動條的滾動改變位置。

"div1">div1

"div2">div2(此時div2相對於視窗定位)

"div3">div3

效果圖:

sticky:粘性定位

在沒有到達指定定位位置時並沒有定位效果,到了指定位置時就變成了固定定位,由於效果不好顯示,就不多描述。

層疊性

當我們對文件中的多個元素設定定位屬性時可能會導致多個元素堆疊在同一位置上。在顯示時最後寫入的元素會優先出現在最上層,這就是元素的層疊性。如果我們想自主控制元素的層疊順序可以通過給元素設定z-index屬性

使用方法:z-index:auto / number ;

auto:預設值 number:整數值 數值越高,優先順序越高。

一周的學習結束,留下記錄,方便以後複習,進步。 下一周,加油。

關於CSS 定位屬性

css定位屬性允許對元素進行定位。屬性值 left style head i am fineh1 how are youp class left how are youp body html p元素相對於本身移動了,產生如下效果 one style head hihihihihihihihih2 c...

關於CSS中的定位屬性position

在布局中時常會遇到一些元素重疊的需求,這個時候就需要考慮使用position定位屬性,此屬性規定某元素以某種特定的方式固定在某個位置上,大部分時候用以處理元素重疊的需求,而不同的定位方式則擁有不同的特性。預設值,相當於沒有定位屬性 相對定位 擁有相對定位方式的元素,會以自身為定位參照,通過left,...

CSS的定位屬性

說到css的定位屬性,首先談一下css的三種定位機制。今天介紹的是第三種定位流,他的定位屬性position有以下幾種情況 1.static 預設值 沒有定位 2.relative 相對定位 參照物 自己所在的位置 特點 如果沒有定位偏移量,對元素本身沒有任何影響,不使元素脫離文件流,空間會被保留,...