CSS position
屬性用于指定一個元素在文檔中的定位方式酪刀。top
粹舵,right
,bottom
和 left
屬性則決定了該元素的最終位置骂倘。
一眼滤、static(正常文檔流
)
所有html元素初始position
都是默認(rèn)static
,此時top
,left
,right
,bottom
和z-index
屬性無效历涝。
二诅需、relative
相對于static
,此時top
,left
,right
,bottom
和z-index
屬性有效。但position:relative
對table-*-group
, table-row
,table-column
, table-cell
, table-caption
元素?zé)o效荧库。
三堰塌、absolute(脫離文檔流
)
元素會被移出正常文檔流,并不為元素預(yù)留空間分衫,通過指定元素相對于最近的非static
定位祖先元素的偏移场刑,來確定元素位置。絕對定位的元素可以設(shè)置外邊距(margins
)蚪战,且不會與其他邊距合并牵现。
四铐懊、fixed(脫離文檔流
)
元素會被移出正常文檔流,并不為元素預(yù)留空間瞎疼,而是通過指定元素相對于屏幕視口(viewport
)的位置來指定元素位置科乎。元素的位置在屏幕滾動時不會改變。打印時丑慎,元素會出現(xiàn)在的每頁的固定位置喜喂。fixed 屬性會創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform
, perspective
或 filter
屬性非 none
時竿裂,容器由視口改為該祖先玉吁。
五、sticky(正常文檔流
)
元素根據(jù)正常文檔流進行定位腻异,然后相對它的最近滾動祖先和 containing block (最近塊級祖先)进副,包括table-related元素,基于top
, right
, bottom
, 和 left
的值進行偏移悔常。偏移值不會影響任何其他元素的位置影斑。