position

1.static:瀏覽器

元素根據文檔的正常流程來進行定位,對頂部、右側、底部、左側和z索引屬性沒有影響。這是默認值。佈局

2.relative:orm

元素根據文檔的正常流進行定位,而後根據頂部、右側、底部和左側的值相對於自身進行偏移。偏移量不影響其餘任何元素的位置;所以,頁面佈局中元素的空間與靜態位置相同。繼承

當z索引的值不是auto時,此值建立一個新的堆棧上下文。它未定義對錶-*-組、錶行、表列、表單元格和表標題元素的影響。索引

3.absolute文檔

元素從正常的文檔流中刪除,而且在頁面佈局中不爲元素建立空間。它的位置相對於它最近的位置的被繼承人,若是有的話;不然,它將相對於初始包含塊放置。它的最終位置由頂部、右側、底部和左側的值決定。頁面佈局

當z索引的值不是auto時,此值建立一個新的堆棧上下文。絕對定位的盒子的邊緣不會與其餘邊緣摺疊。it

4.fixedform

元素從正常的文檔流中刪除,而且在頁面佈局中不爲元素建立空間。它是相對於由viewport創建的初始包含塊進行定位的,除非它的一個被繼承人有一個transform、perspective或filter屬性設置爲none之外的其餘屬性(請參閱CSS Transforms Spec),在這種狀況下,被繼承人行爲包含塊。(請注意,瀏覽器與透視圖和過濾器的不一致致使了塊的造成。)它的最終位置由頂部、右側、底部和左側的值決定。transform

這個值老是建立一個新的堆棧上下文。在打印文檔中,元素被放在每一個頁面的相同位置。

5.sticky

元素根據文檔的正常流進行定位,而後根據頂部、右側、底部和左側的值相對於其最近的滾動被繼承人進行偏移,幷包含塊(最近的塊級祖先),包括與表相關的元素。偏移量不影響任何其餘元素的位置。

這個值老是建立一個新的堆棧上下文。請注意,一個粘性元素「粘附」到其最近的被繼承人,它具備「滾動機制」(在隱藏溢出、滾動、自動或覆蓋時建立),即便它不是最近的真正滾動被繼承人。這有效地抑制了任何「粘性」行爲(參見W3C CSSWG上的Github問題)。

相關文章
相關標籤/搜索