CSS定位

waruqi 發(fā)布于2019-08-29 14:20 / 879人閱讀

摘要：文檔流簡單說就是元素按照其在中的位置順序決定排布的過程。只要不是和絕對(duì)定位方式布局的，都在文檔流里面。位置設(shè)置為的元素，它始終會(huì)處于文檔流給予的位置。但是，當(dāng)注釋代碼取消注釋生效后，就會(huì)相對(duì)文檔流中應(yīng)當(dāng)呈現(xiàn)的位置進(jìn)行移動(dòng)。

1.文檔流

簡單說就是元素按照其在 HTML 中的位置順序決定排布的過程。HTML的布局機(jī)制就是用文檔流模型的，即塊元素（block）獨(dú)占一行，內(nèi)聯(lián)元素（inline）不獨(dú)占一行。
一般使用margin是用來隔開元素與元素的間距；padding是用來隔開元素與內(nèi)容的間隔。margin用于布局分開元素使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段“距離”。只要不是float和絕對(duì)定位方式布局的，都在文檔流里面。

2.position屬性介紹

static，默認(rèn)值。位置設(shè)置為static的元素，它始終會(huì)處于文檔流給予的位置。

inherit，規(guī)定應(yīng)該從父元素繼承 position屬性的值。但是任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 “inherit”。

fixed，生成絕對(duì)定位的元素。默認(rèn)情況下，可定位于相對(duì)于瀏覽器窗口的指定坐標(biāo)。
元素的位置通過 “l(fā)eft”, “top”, “right” 以及 “bottom” 屬性進(jìn)行規(guī)定。不論窗口滾動(dòng)與否，元素都會(huì)留在那個(gè)位置。但當(dāng)祖先元素具有transform屬性且不為none時(shí)，就會(huì)相對(duì)于祖先元素指定坐標(biāo)，而不是瀏覽器窗口。

absolute，生成絕對(duì)定位的元素，相對(duì)于距該元素最近的已定位的祖先元素進(jìn)行定位。
此元素的位置可通過 “l(fā)eft”、”top”、”right” 以及 “bottom” 屬性來規(guī)定。

relative，生成相對(duì)定位的元素，相對(duì)于該元素在文檔中的初始位置進(jìn)行定位。
通過 “l(fā)eft”、”top”、”right” 以及 “bottom” 屬性來設(shè)置此元素相對(duì)于自身位置的偏移。

3.相對(duì)定位

relative生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。

相對(duì)定位完成的過程如下：
按默認(rèn)方式（static）生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來)。相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由 left、right、top、bottom 屬性確定，偏移前的位置保留不動(dòng)。

其中box2中的注釋代碼未生效前，是按照文檔流進(jìn)行排序呈現(xiàn)。
但是，當(dāng)注釋代碼取消注釋生效后，就會(huì)相對(duì)文檔流中應(yīng)當(dāng)呈現(xiàn)的位置進(jìn)行移動(dòng)。
所以，相對(duì)定位的參照物是它本身。

4.絕對(duì)定位

絕對(duì)定位與相對(duì)定位的一大不同之處就是，當(dāng)我們把一個(gè)元素設(shè)置成絕對(duì)定位，那么這個(gè)元素將會(huì)脫離文檔流，其他元素就會(huì)認(rèn)為這個(gè)元素不存在于文檔流中而填充它原來的位置。絕對(duì)定位元素根據(jù)它的參照物移動(dòng)自己的位置，而參照物則需要根據(jù)它祖先元素的定位設(shè)置來確定。
所謂根據(jù)它祖先元素的定位設(shè)置來確定簡單理解為：相對(duì)于該元素最近的已定位的祖先元素，如果沒有一個(gè)祖先元素設(shè)置定位，那么參照物是body層。

在祖先元素沒定位的情況下，使用absolute。在這種情況下，參考物就是body。

祖先元素有定位，祖先元素只要設(shè)置了值不為position:static之外的值，都視為有定位，并且最近的祖先元素會(huì)被設(shè)置為絕對(duì)定位元素的參照物。在這種情況下，參考物就是最近的祖先元素。

在沒設(shè)置left/right、top/bottom的情況下，absolute元素的位置就是該元素在文檔流里的位置