相對定位 絕對定位 固定定位

2021-10-08 09:12:53 字數 1543 閱讀 4313

設定position屬性值為static的元素是乙個靜態定位元素,此值為預設值,即此元素在正常文件流中。

設定position屬性為relative的元素是乙個相對定位元素,其定位的參照物為元素本身(即元素原本的位置進行定位)。

例項

>

.parent

.child

style

>

class

="parent"

>

class

="child"

>

div>

div>

相對定位元素會基於元素本身的位置進行定位。可以看一下例項的效果圖,黑色方塊為子元素,明顯向右(設定的是left)偏移了。

設定position屬性為absolute的元素是乙個絕對定位元素,其定位的參照物是position屬性值不是static的包含塊。當塊元素設定為絕對元素且不指定寬度時,其寬度會收縮至內容本身大小。

例項

>

.parent

.child

style

>

class

="parent"

>

class

="child"

>

我是乙個子元素div

>

div>

絕對定位元素(黑色方塊)會基於設定了position屬性值不是static的包含塊(橙色)進行定位。且絕對定位元素的寬度會收縮至元素內容大小。

設定了固定定位的元素,會基於 viewport 視窗進行定位。其實固定定位只是乙個包含塊為 viewport 視窗的絕對定位。

sticky是css定位新增屬性;mdn上講粘性定位可以被認為是相對定位和固定定位的混合,常常與滾動進行混用。ie瀏覽器不支援此屬性值。

常規情況下同position:relative一樣

在顯示不超出其父元素的前提條件下,盡可能與 最近滾動祖先 保持指定的最小距離

使用了 position:sticky; 的元素會為其子元素建立新的層疊上下文(stacking context)

例項

>

.parent

.child

style

>

class

="parent"

>

class

="child"

>

div>

div>

可以看到黑色小方塊始終是距離頂端大於20px

css 相對定位,絕對定位,固定定位

定位有三種,分別是相對定位 絕對定位 固定定位。相對定位 position relative 絕對定位 position absolute 固定定位 position fixed 相對定位 相對定位,就是微調元素位置的。讓元素相對自己原來的位置,進行位置調整。head meta charset ut...

絕對定位,相對定位,固定定位

通過position屬性來設定元素的定位 static 預設值,元素沒有開啟定位 relative 開啟元素的相對定位 absolute 開啟元素的絕對定位 fixed 開啟元素的固定定位 也是絕對定位的一種 說明 當開啟了元素的相對定位以後,而不設定偏移量時,元素不會發生任何變化 相對定位是相對於...

相對定位,絕對定位和固定定位

1.脫標,但是保留原來位置 下面的盒子上不來,也可以說是半脫標 2.偏移從以自己標準流中的位置為原點 1.完全脫標,不保留原來位置 2.父元素沒有定位的情況,子盒子以當前螢幕為基準點進行移動 3.父元素有定位 相對,固定,絕對 的情況,子盒子以父元素 有定位的最近祖元素 為基準點進行移動 body ...