CSS position屬性用於指定一個元素在文檔中的定位方式。top,right,bottom和left屬性則決定了該元素的最終位置。 常見語法 static | relative | absolute | sticky | fixed static 預設值。沒有定位,元素出現在正常的流中(忽略 ...
CSS position屬性用於指定一個元素在文檔中的定位方式。top,right,bottom和left屬性則決定了該元素的最終位置。
常見語法
static | relative | absolute | sticky | fixed
static
預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 聲明)。
relative
生成相對定位的元素,相對於其正常位置進行定位(不改變頁面佈局,因此會在此元素未添加定位時所在位置留下空白)。
absolute
生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。脫離了文檔流,不為元素預留空間,通過指定元素相對於最近的非 static 定位祖先元素的偏移,來確定元素位置。絕對定位的元素可以設置外邊距(margins),且不會與其他邊距合併。
fixed
生成絕對定位的元素,相對於瀏覽器視窗進行定位。
inherit
規定應該從父元素繼承 position 屬性的值。
可繼承的屬性:
- 所有元素可繼承:visibility、cursor
- 內聯元素可繼承:letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
- 塊狀元素可繼承:text-indent和text-align
- 列表元素可繼承:list-style、list-style-type、list-style-position、list-style-image
- 表格元素可繼承:border-collapse
不可繼承的屬性:
- background-color...
initial
設置 CSS 屬性為它的預設值,可作用於任何 CSS 樣式。(IE 不支持該關鍵字)
unset
不設置
sticky
- 盒位置根據正常流計算(這稱為正常流動中的位置),然後相對於該元素在流中的 flow root(BFC)和 containing block(最近的塊級祖先元素)定位。在所有情況下(即便被定位元素為 table 時),該元素定位均不對後續元素造成影響。當元素 B 被粘性定位時,後續元素的位置仍按照 B 未定位時的位置來確定。position: sticky 對 table 元素的效果與 position: relative 相同。
- 元素定位表現為在跨越特定閾值前為相對定位,之後為固定定位。
- 這個特定閾值指的是 top, right, bottom 或 left 之一,換言之,指定 top, right, bottom 或 left 四個閾值其中之一,才可使粘性定位生效。否則其行為與相對定位相同。
生效規則
須指定 top, right, bottom 或 left 四個閾值其中之一,才可使粘性定位生效。否則其行為與相對定位相同。
並且 top 和 bottom 同時設置時,top 生效的優先順序高,left 和 right 同時設置時,left 的優先順序高。
設定為 position:sticky 元素的任意父節點的 overflow 屬性必須是 visible,否則 position:sticky 不會生效。這裡需要解釋一下:
- 如果 position:sticky 元素的任意父節點定位設置為 overflow:hidden,則父容器無法進行滾動,所以 position:sticky 元素也不會有滾動然後固定的情況。
如果 position:sticky 元素的任意父節點定位設置為 position:relative | absolute | fixed,則元素相對父元素進行定位,而不會相對 viewprot 定位。
由於相容性不好而不被重用,火狐和IOS有很好的支持性。
應用場景:電話薄和微信通訊錄的字母吸頂條。
現在只需要一個屬性:
position:sticky;top:0;