CSS：層疊樣式表—position

本文轉載於:猿2048網站https://www.mk2048.com/blog/blog.php?id=cjiaakj&title=CSS%EF%BC%9A%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8%E2%80%94position

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;

本文轉載於:猿2048➼https://www.mk2048.com/blog/blog.php?id=cjiaakj&title=CSS%EF%BC%9A%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8%E2%80%94position