position定位屬性理解

2021-10-07 23:50:19 字數 1010 閱讀 7002

html 元素的預設值,即沒有定位,遵循正常的文件流物件;靜態定位的元素不會受到 top, bottom, left, right影響

如果沒有定位偏移量,那麼對元素本身沒有任何影響

不使元素脫離文件流

不會影響其他元素布局

left, right, top, bottom是相對於當前元素自身進行偏移的

使元素完全脫離文件流

使內聯元素支援寬高(讓內聯元素具備塊級元素的特性)

使塊元素預設寬度由內容決定(讓塊元素具備內聯元素的特性)

生成絕對定位的元素,相對於 static 定位以外(relative、absolute、fixed)的第乙個父元素進行定位

使元素完全脫離文件流

使內聯元素支援寬高(讓內聯元素具備塊級元素的特性)

使塊元素預設寬根據內容決定(讓塊元素具備內聯元素的特性)

相對於整個瀏覽器視窗進行偏移,不受瀏覽器滾動條的影響

sticky 英文本面意思是粘,貼上,所以可以把它稱之為粘性定位。 

基於使用者的滾動位置來定位。

粘性定位的元素是依賴於使用者的滾動,在position:relativeposition:fixed定位之間切換。

它的行為就像position:relative;而當頁面滾動超出目標區域時,它的表現就像position:fixed;,它會固定在目標位置。

元素定位表現為在跨越特定閾值前為相對定位,之後為固定定位。

這個特定閾值指的是 top, right, bottom 或 left 之一,換言之,指定 top, right, bottom 或 left 四個閾值其中之一,才可使粘性定位生效。否則其行為與相對定位相同。

注意:internet explorer, edge 15 及更早 ie 版本不支援 sticky 定位。 safari 需要使用 -webkit- prefix

position定位屬性

position定位屬性設定值 absolute 絕對定位 脫離原普通流 依據父級 祖先級元素的位置進行定位 如果沒有父級元素,則參照body進行定位 relative 相對定位 相對於原位置的定位,仍然佔據原先普通流的位置 static 元素框正常生成。塊級元素生成乙個矩形框,作為文件流的一部分,...

position屬性定位

1 html中有三種布局方式 標準流 順序布局 浮動 定位 層模型 position 塊級元素單獨佔一行從上到下排列,行內元素共享一行 position改變元素正常的標準流,以非正常的方式脫離標準流 需要有left right top bottom設定值,否則仍然是處於標準的文件流中的 後寫的元素會...

定位 position屬性

一.定位 position屬性 1.static 預設值 沒有定位 以標準文件流方式顯示 2.relative 相對定位 相對自身原來的位置進行偏移 top left right bottom 3.absolute 絕對定位 4.fixed 固定定位 二.相對定位元素的規律 1.設定相對定位的盒子會...