摘要：學(xué)習(xí)摘要定位學(xué)習(xí)摘要定位注全文摘自定位定位允許您從正常的文檔流布局中取出元素，并使它們具有不同的行為，例如放在另一個(gè)元素的上面，或者始終保持在瀏覽器視窗內(nèi)的同一位置。使用上述四個(gè)屬性來精確指定要將定位元素移動(dòng)到的位置。

CSS學(xué)習(xí)摘要-定位

注：全文摘自MDN-CSS定位

定位允許您從正常的文檔流布局中取出元素，并使它們具有不同的行為，例如放在另一個(gè)元素的上面，或者始終保持在瀏覽器視窗內(nèi)的同一位置。 本文解釋的是定位(position)的各種不同值，以及如何使用它們。

文檔流

定位是一個(gè)相當(dāng)復(fù)雜的話題，所以我們深入了解代碼之前，讓我們審視一下布局理論，并讓我們了解它的工作原理。

首先，環(huán)繞元素內(nèi)容添加任何內(nèi)邊距、邊界和外邊距來布置單個(gè)元素盒子——這就是 盒模型 ，我們前面看過。 默認(rèn)情況下，塊級(jí)元素的內(nèi)容寬度是其父元素的寬度的100％，并且與其內(nèi)容一樣高。內(nèi)聯(lián)元素高寬與他們的內(nèi)容高寬一樣。您不能對(duì)內(nèi)聯(lián)元素設(shè)置寬度或高度——它們只是位于塊級(jí)元素的內(nèi)容中。 如果要以這種方式控制內(nèi)聯(lián)元素的大小，則需要將其設(shè)置為類似塊級(jí)元素 display: block;。

這只是解釋了單個(gè)元素，但是元素相互之間如何交互呢？ 正常的布局流（在布局介紹文章中提到）是將元素放置在瀏覽器視口內(nèi)的系統(tǒng)。默認(rèn)情況下，塊級(jí)元素在視口中垂直布局——每個(gè)都將顯示在上一個(gè)元素下面的新行上，并且它們的外邊距將分隔開它們。

內(nèi)聯(lián)元素表現(xiàn)不一樣——它們不會(huì)出現(xiàn)在新行上；相反，它們互相之間以及任何相鄰（或被包裹）的文本內(nèi)容位于同一行上，只要在父塊級(jí)元素的寬度內(nèi)有空間可以這樣做。如果沒有空間，那么溢流的文本或元素將向下移動(dòng)到新行。

如果兩個(gè)相鄰元素都在其上設(shè)置外邊距，并且兩個(gè)外邊距接觸，則兩個(gè)外邊距中的較大者保留，較小的一個(gè)消失——這叫外邊距折疊, 我們之前也遇到過。

讓我們來看一個(gè)簡單的例子來解析這一切：

Basic document flow

I am a basic block level element. My adjacent block level elements sit on new lines below me.

By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.

We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.

inline elements like this one and this one sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will wrap onto a new line if possible (like this one containing text), or just go on to a new line if not, much like this image will do: 
在我們閱讀本文時(shí)，我們將多次重復(fù)這個(gè)例子，因?yàn)槲覀円故静煌ㄎ贿x項(xiàng)的效果。
如果可能，我們希望您在本地計(jì)算機(jī)上跟隨練習(xí) — 從GitHub倉庫下載一個(gè)[0_basic-flow.html](http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html) (源代碼) 然后用它作為我們的起步點(diǎn)。
介紹定位
定位的整個(gè)想法是允許我們覆蓋上面描述的基本文檔流行為，以產(chǎn)生有趣的效果。如果你想稍微改變布局中一些盒子的位置，使它們的默認(rèn)布局流程位置稍微有點(diǎn)古怪，不舒服的感覺呢？定位是你的工具?；蛘?，如果您想要?jiǎng)?chuàng)建一個(gè)浮動(dòng)在頁面其他部分頂部的UI元素，并且/或者始終停留在瀏覽器窗口內(nèi)的相同位置，無論頁面滾動(dòng)多少？定位使這種布局工作成為可能。
有許多不同類型的定位，您可以對(duì)HTML元素生效。要使某個(gè)元素上的特定類型的定位，我們使用position屬性。
靜態(tài)定位
靜態(tài)定位是每個(gè)元素獲取的默認(rèn)值——它只是意味著“將元素放入它在文檔布局流中的正常位置 ——這里沒有什么特別的。
為了演示這一點(diǎn)，并為以后的部分設(shè)置示例，首先在HTML中添加一個(gè)positioned 的 class 到第二個(gè)
：
 ... 
現(xiàn)在，將以下規(guī)則添加到CSS的底部：
.positioned {
   position: static;
   background: yellow;
}
如果現(xiàn)在保存和刷新，除了第2段的更新的背景顏色，根本沒有差別。這很好——正如我們之前所說，靜態(tài)定位是默認(rèn)行為！
相對(duì)定位
相對(duì)定位是我們將要看的第一個(gè)位置類型。 它與靜態(tài)定位非常相似，占據(jù)在正常的文檔流中，除了你仍然可以修改它的最終位置，包括讓它與頁面上的其他元素重疊。 讓我們繼續(xù)并更新代碼中的 position 屬性：
position: relative;
如果您在此階段保存并刷新，則結(jié)果根本不會(huì)發(fā)生變化——那么如何修改元素的位置呢？ 您需要使用top，bottom，left和right屬性 ，我們將在下一節(jié)中解釋。
介紹 top, bottom, left, right

top top樣式屬性定義了定位元素的上外邊距邊界與其包含塊上邊界之間的偏移，非定位元素設(shè)置此屬性無效。
bottom bottom樣式屬性定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移，非定位元素設(shè)置此屬性無效。
left left屬性定義了定位元素的左外邊距邊界與其包含塊左邊界之間的偏移，非定位元素設(shè)置此屬性無效。
right right樣式屬性定義了定位元素的右外邊距邊界與其包含塊右邊界之間的偏移，非定位元素設(shè)置此屬性無效。

使用上述四個(gè)屬性來精確指定要將定位元素移動(dòng)到的位置。 要嘗試這樣做，請(qǐng)?jiān)贑SS中的 .positioned 規(guī)則中添加以下聲明：
top: 30px;
left: 30px;
注意：這些屬性的值可以采用邏輯上期望的任何單位 ——px，mm，rems，％等。
如果你現(xiàn)在保存和刷新，你會(huì)得到一個(gè)這樣的結(jié)果：

酷，是嗎？ 好吧，所以這個(gè)結(jié)果這可能不是你期待的——為什么它移動(dòng)到底部和右邊，但我們指定頂部和左邊？ 聽起來不合邏輯，但這只是相對(duì)定位工作的方式——你需要考慮一個(gè)看不見的力，推動(dòng)定位的盒子的一側(cè)，移動(dòng)它的相反方向。 所以例如，如果你指定 top: 30px;一個(gè)力推動(dòng)框的頂部，使它向下移動(dòng)30px。
絕對(duì)定位
絕對(duì)定位帶來了非常不同的結(jié)果。讓我們嘗試改變代碼中的位置聲明如下：
position: absolute;
如果你現(xiàn)在保存和刷新，你應(yīng)該看到這樣：

首先，請(qǐng)注意，定位的元素應(yīng)該在文檔流中的間隙不再存在——第一和第三元素已經(jīng)關(guān)閉在一起，就像它不再存在！好吧，在某種程度上，這是真的。絕對(duì)定位的元素不再存在于正常文檔布局流中。相反，它坐在它自己的層獨(dú)立于一切。這是非常有用的——這意味著我們可以創(chuàng)建不干擾頁面上其他元素的位置的隔離的UI功能 ——例如彈出信息框和控制菜單，翻轉(zhuǎn)面板，可以在頁面上的任何地方拖放的UI功能等。
第二，注意元素的位置已經(jīng)改變——這是因?yàn)?code>top，bottom，left和right以不同的方式在絕對(duì)定位。 它們指定元素應(yīng)距離每個(gè)包含元素的邊的距離，而不是指定元素應(yīng)該移入的方向。 所以在這種情況下，我們說的絕對(duì)定位元素應(yīng)該位于從“包含元素”的頂部30px，從左邊30px。
注意：您可以使用top，bottom，left和right如果需要，調(diào)整元素大小。 嘗試設(shè)置 top: 0; bottom: 0; left: 0; right: 0; 和 margin: 0; 對(duì)你定位的元素，看看會(huì)發(fā)生什么！ 之后再回來。
注意：是的，外邊距仍會(huì)影響定位的元素。 然而，外邊距折疊不會(huì)。
定位上下文
哪個(gè)元素是絕對(duì)定位元素的“包含元素”？ 默認(rèn)情況下，它是元素——定位的元素是被嵌套在中的HTML源代碼，但在最終的布局，它離頁面邊緣的頂部和左側(cè)30px距離，這是元素。 這更準(zhǔn)確地稱為元素的定位上下文。
我們可以改變定位上下文——絕對(duì)定位的元素相對(duì)于其定位的元素。 這是通過在元素的其他祖先之一上設(shè)置定位來實(shí)現(xiàn)的——它是嵌套在其中的元素之一（你不能相對(duì)于其中沒有嵌套的元素來定位它）。 為了演示這一點(diǎn)，將以下聲明添加到您的body規(guī)則中：
position: relative;
這應(yīng)該給出以下結(jié)果：

定位的元素現(xiàn)在相對(duì)于元素。
介紹 z-index
所有這些絕對(duì)定位很有趣，但還有另一件事我們還沒有考慮到 ——當(dāng)元素開始重疊，什么決定哪些元素出現(xiàn)在其他元素的頂部？ 在我們已經(jīng)看到的示例中，我們?cè)诙ㄎ簧舷挛闹兄挥幸粋€(gè)定位的元素，它出現(xiàn)在頂部，因?yàn)槎ㄎ坏脑貏龠^未定位的元素。 當(dāng)我們有不止一個(gè)的時(shí)候呢？
嘗試添加以下到您的CSS，使第一段也是絕對(duì)定位：
p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}
此時(shí)，您將看到第一段的顏色為綠色，移出文檔流程，并位于原始位置上方一點(diǎn)。它也堆疊在原始的 .positioned 段落下，其中兩個(gè)重疊。這是因?yàn)?.positioned 段落是源順序中的第二個(gè)段落，并且源順序中后定位的元素將贏得先定位的元素。
您可以更改堆疊順序嗎？是的，您可以使用z-index屬性。 “z-index”是對(duì)z軸的參考。你可以從源代碼中的上一點(diǎn)回想一下，我們使用水平（x軸）和垂直（y軸）坐標(biāo)來討論網(wǎng)頁，以確定像背景圖像和陰影偏移之類的東西的位置。 （0,0）位于頁面（或元素）的左上角，x和y軸跨頁面向右和向下（適合從左到右的語言，無論如何）。
網(wǎng)頁也有一個(gè)z軸——一條從屏幕表面到你的臉（或者在屏幕前面你喜歡的任何其他東西）的虛線。z-index值影響定位元素位于該軸上的位置——正值將它們移動(dòng)到堆棧上方，負(fù)值將它們向下移動(dòng)到堆棧中。默認(rèn)情況下，定位的元素都具有z-index為auto，實(shí)際上為0。
要更改堆疊順序，請(qǐng)嘗試將以下聲明添加到 p:nth-of-type(1) 規(guī)則中：
z-index: 1;
你現(xiàn)在應(yīng)該看到完成的例子：

請(qǐng)注意，z-index只接受無單位索引值；你不能指定你想要一個(gè)元素是Z軸上23像素—— 它不這樣工作。 較高的值將高于較低的值，這取決于您使用的值。 使用2和3將產(chǎn)生與300和40000相同的效果。
固定定位
還有一種類型的定位覆蓋——fixed。 這與絕對(duì)定位的工作方式完全相同，只有一個(gè)主要區(qū)別——絕對(duì)定位固定元素是相對(duì)于 元素或其最近的定位祖先，而固定定位固定元素則是相對(duì)于瀏覽器視口本身。 這意味著您可以創(chuàng)建固定的有用的UI項(xiàng)目，如持久導(dǎo)航菜單。
讓我們舉一個(gè)簡單的例子來說明我們的意思。首先，從CSS中刪除現(xiàn)有的 p:nth-of-type(1) 和.positioned 規(guī)則。
現(xiàn)在，更新 body 規(guī)則以刪除position: relative; 聲明并添加固定高度，如此：
body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}
現(xiàn)在我們要給
元素 position: fixed;，并讓它坐在視口的頂部中心。將以下規(guī)則添加到CSS：

h1 {
  position: fixed;
  top: 0;
  width: 500px;
  margin: 0 auto;
  background: white;
  padding: 10px;
}
top: 0;是要使它貼在屏幕的頂部；我們?nèi)缓蠼o出標(biāo)題與內(nèi)容列相同的寬度，并使用可靠的老技巧 margin: 0 auto; 使它居中。 然后我們給它一個(gè)白色背景和一些內(nèi)邊距，所以內(nèi)容將不會(huì)在它下面可見。
如果您現(xiàn)在保存并刷新，您會(huì)看到一個(gè)有趣的小效果，標(biāo)題保持固定，內(nèi)容顯示向上滾動(dòng)并消失在其下。 但是我們可以改進(jìn)這一點(diǎn)——目前標(biāo)題下面擋住一些內(nèi)容的開頭。這是因?yàn)槎ㄎ坏臉?biāo)題不再出現(xiàn)在文檔流中，所以其他內(nèi)容向上移動(dòng)到頂部。 我們要把它向下移動(dòng)一點(diǎn)；我們可以通過在第一段設(shè)置一些頂部邊距來做到這一點(diǎn)。添加：
p:nth-of-type(1) {
  margin-top: 60px;
}
你現(xiàn)在應(yīng)該看到完成的例子：

實(shí)驗(yàn)屬性: position sticky
有一個(gè)新的定位值可用稱為 position: sticky，尚未廣泛支持。 這基本上是相對(duì)位置和固定位置之間的混合，其允許定位的元件像它被相對(duì)定位一樣動(dòng)作，直到其滾動(dòng)到某一閾值點(diǎn)（例如，從視口頂部10像素），之后它變得固定。閱讀我們的position:sticky 引用入口 查看詳情和例子。
總結(jié)
我相信你用基本定位愉快地玩耍——它是創(chuàng)建復(fù)雜的CSS布局和UI功能背后的基本工具之一。 考慮到這一點(diǎn)，在下一篇文章中，我們將更有趣的定位——我們將進(jìn)一步，開始建立一些真實(shí)世界有用的東西。
【end】