1. 程式人生 > >web中的position的意思理解

web中的position的意思理解

流程 性能 屬性 erl right 屬性設置 static 通過 建立

static:

元素根據文檔的正常流程定位。的top,right,bottom,left,和z-index性能有任何影響這是默認值。

relative:

該元件根據文檔的正常流動定位,然後偏移相對於它本身的基礎上的值toprightbottom,和left偏移量不會影響任何其他元素的位置; 因此,頁面布局中為元素給出的空間與位置相同static

當值不是時,此值將創建新的疊堆上下文它在影響,和元素是不確定的。

absolute;

該元素將從普通文檔流中刪除,並且不會為頁面布局中的元素創建空間。它相對於其最近的祖先(如果有的話)定位; 否則,它相對於初始包含快放置其最終位置是由的值確定的

toprightbottom,和left當值不是時,此值將創建新的疊堆上下文絕對定位框的邊距不會與其他邊距一起折疊

fixed:

該元素將從普通文檔流中刪除,並且不會為頁面布局中的元素創建空間。它相對於所述初始位置包含快通過所建立的視口除了當它的祖先中的一個具有,transformperspective,或filter屬性設置為比其他的東西none,在這種情況下祖先表現為包含塊。(請註意,存在與瀏覽器的不一致性perspectivefilter有助於包含塊的形成。)其最終位置是由的值確定的toprightbottom,和left此值始終創建新的疊堆上下文在打印文檔中,元素放置在

每個頁面上的相同位置

sticky:

該元件根據文檔的正常流動定位,然後偏移相對於它的最近的祖先滾動和包含塊(最接近的塊級祖先),包括表相關的元素的基礎上的值toprightbottom,和left偏移量不會影響任何其他元素的位置。此值始終創建新的疊堆上下文需要註意的是粘性元素“大棒”,以具有“滾動機制”,其最近的祖先(創建時overflowhiddenscrollauto,或overlay),即使祖先是不是最近的實際滾動的祖先。這有效地抑制了任何“粘性”行為。

web中的position的意思理解