Positioning

文檔流

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

首先，通過獲取元素的內(nèi)容，然后在其周圍添加任何填充，邊框和邊框來布置單個(gè)元素框 - 這是框模型事 再次，我們前面看過。 默認(rèn)情況下，塊級(jí)元素的內(nèi)容是其父元素的寬度的100％，并且與其內(nèi)容一樣高。 內(nèi)聯(lián)元素都是高的，因?yàn)樗鼈兊膬?nèi)容，以及它們的內(nèi)容。 您不能對(duì)內(nèi)聯(lián)元素設(shè)置寬度或高度 - 它們只是位于塊級(jí)元素的內(nèi)容中。 如果要以這種方式控制內(nèi)聯(lián)元素的大小，您需要將其設(shè)置為類似于具有 display:block; 的塊級(jí)元素。

這解釋了個(gè)別元素，但是元素如何相互交互呢？ 正常布局流(在布局介紹文章中提到)是元素放置在瀏覽器視口內(nèi)的系統(tǒng)。 默認(rèn)情況下，塊級(jí)元素在視口中垂直布局 - 每個(gè)都將顯示在最后一個(gè)下面的新行上，它們將被設(shè)置在其上的任何邊距分隔。

內(nèi)聯(lián)元素的行為不同 - 它們不會(huì)出現(xiàn)在新行上; 相反，它們彼此位于相同的行和任何相鄰(或包裝)的文本內(nèi)容，只要在父塊級(jí)元素的寬度內(nèi)有空間可以這樣做。 如果沒有空格，那么溢出的文本或元素將向下移動(dòng)到新行。

如果兩個(gè)相鄰元素都設(shè)置了邊距，并且兩個(gè)邊距接觸，則兩個(gè)邊界中較大的一個(gè)保留，較小的一個(gè)消失，這被稱為 / docs / Web / CSS / CSS_Box_Model / Mastering_margin_collapsing">利潤(rùn)崩潰，我們也遇到了這種情況。

讓我們看一個(gè)簡(jiǎn)單的例子來解釋這一切:

<h1>Basic document flow</h1>

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

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

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

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></p>

body {
? width: 500px;
? margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

我們將通過這篇文章重復(fù)這個(gè)例子多次，因?yàn)槲覀冋故玖宋覀兛捎玫牟煌ㄎ贿x項(xiàng)的效果。

我們希望您在本地計(jì)算機(jī)上遵循練習(xí)，如果可能，請(qǐng)獲取 /positioning/0_basic-flow.html"class ="external"> 0_basic-flow.html 從我們的Github倉庫( area / blob / master / css / css-layout / positioning / 0_basic-flow.html"class ="external">這里的源代碼)，并以此為起點(diǎn)。

介紹定位

定位的整個(gè)想法是允許我們覆蓋上述的基本文檔流行為，以產(chǎn)生有趣的效果。 如果你想稍微改變一個(gè)布局中的一些框的位置從他們的默認(rèn)布局流動(dòng)位置，給一個(gè)有點(diǎn)古怪，苦惱的感覺？ 定位是您的工具。 或者，如果你想創(chuàng)建一個(gè)UI元素漂浮在頁面的其他部分的頂部，和/或總是坐在瀏覽器窗口內(nèi)的同一個(gè)地方，不管頁面滾動(dòng)多少？ 定位使得這種布局工作成為可能。

有許多不同類型的定位，您可以對(duì)HTML元素生效。 要在元素上啟用特定類型的定位，我們使用 position 屬性。

靜態(tài)定位

靜態(tài)定位是每個(gè)元素獲取的默認(rèn)值 - 它只是意味著"將元素放入它在文檔布局流中的正常位置 - 這里沒有什么特別的。

為了演示這一點(diǎn)，并為以后的部分設(shè)置示例，首先向 / HTML / Element / p"> < p> :

<p class="positioned"> ... </p>

現(xiàn)在，將以下規(guī)則添加到CSS的底部:

.positioned {
   position: static;
  background: yellow;
}

如果現(xiàn)在保存和刷新，除了第2段的更新的背景顏色，您將看不到任何差異。 這很好 - 正如我們之前所說，靜態(tài)定位是默認(rèn)行為！

相對(duì)定位

相對(duì)定位是我們將要看的第一個(gè)位置類型。 這與靜態(tài)定位非常相似，除了一旦定位的元素在正常布局流程中占據(jù)了位置，則可以修改其最終位置，包括使其與頁面上的其他元素重疊。 繼續(xù)并更新代碼中的位置聲明:

position: relative;

如果您在此階段保存并刷新，則結(jié)果根本不會(huì)發(fā)生變化 - 那么如何修改元素的位置呢？ 您需要使用 頂部 ， / CSS / bottom"> bottom ， 左 ，以及 右 屬性，我們將在下一節(jié)中說明。

介紹頂部，底部，左側(cè)和右側(cè)

top ， > bottom ， 左 和 ="/ zh-CN / docs / Web / CSS / right"> right 與 position 指定要將定位元素移動(dòng)到的位置。 要嘗試這樣做，請(qǐng)?jiān)贑SS中的 .positioned 規(guī)則中添加以下聲明:

top: 30px;
left: 30px;

如果你現(xiàn)在保存和refesh，你會(huì)得到一個(gè)這樣的結(jié)果:

<h1>Relative positioning</h1>

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

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

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

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></p>

body {
? width: 500px;
? margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

酷，是嗎？ 好吧，所以這可能不是你期待的 - 為什么它移動(dòng)到底部和右邊，如果我們指定頂部和左邊？ 不合邏輯的，因?yàn)樗赡艹跏嫉穆曇?，這只是相對(duì)定位工作的方式 - 你需要考慮一個(gè)看不見的力，推動(dòng)定位的盒子的一側(cè)，移動(dòng)它的相反方向。 所以例如，如果你指定 top:30px; ，力推動(dòng)框的頂部，使它向下移動(dòng)30px。

絕對(duì)定位

絕對(duì)定位帶來了非常不同的結(jié)果。 讓我們嘗試改變代碼中的位置聲明如下:

position: absolute;

如果你現(xiàn)在保存和刷新，你應(yīng)該看到這樣:

<h1>Absolute positioning</h1>

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

<p class="positioned">Now I'm absolutely positioned, I'm not playing by the rules any more!</p>

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

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></p>

body {
? width: 500px;
? margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

首先，請(qǐng)注意，定位的元素應(yīng)該在文檔流中的間隙不再存在 - 第一和第三元素已經(jīng)關(guān)閉在一起，就像它不再存在！ 好吧，在某種程度上，這是真的。 絕對(duì)定位的元素不再存在于正常文檔布局流程中。 相反，它坐在它自己的層獨(dú)立于一切。 這是非常有用的 - 這意味著我們可以創(chuàng)建不干擾頁面上其他元素的位置的獨(dú)立的UI功能 - 例如彈出信息框和控制菜單，滾動(dòng)面板，UI功能，可以拖放到任何地方 在頁面上，等等。

首先，請(qǐng)注意，定位的元素應(yīng)該在文檔流中的間隙不再存在 - 第一和第三元素已經(jīng)關(guān)閉在一起，就像它不再存在！ 好吧，在某種程度上，這是真的。 絕對(duì)定位的元素不再存在于正常文檔布局流程中。 相反，它坐在它自己的層獨(dú)立于一切。 這是非常有用的 - 這意味著我們可以創(chuàng)建不干擾頁面上其他元素的位置的獨(dú)立的UI功能 - 例如彈出信息框和控制菜單，滾動(dòng)面板，UI功能，可以拖放到任何地方 在頁面上，等等。...

定位上下文

哪個(gè)元素是絕對(duì)定位元素的"包含元素"？ 默認(rèn)情況下，它是 < html> 元素 - 定位元素嵌套在 HTML源代碼中的 < body> ，但在最終布局中， 距離頁面邊緣頂部和左側(cè)30px，即 < html> / a>元素。 這更準(zhǔn)確地稱為元素的定位上下文。

我們可以更改定位上下文 - 絕對(duì)定位元素相對(duì)于其定位的元素。 這是通過在元素的其他祖先之一上設(shè)置定位來實(shí)現(xiàn)的 - 它是嵌套在其中的元素之一(你不能相對(duì)于其中沒有嵌套的元素來定位它)。 為了演示這一點(diǎn)，將以下聲明添加到您的正文規(guī)則:

position: relative;

這應(yīng)該給出以下結(jié)果:

<h1>Positioning context</h1>

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

<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p>

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

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></p>

body {
? width: 500px;
? margin: 0 auto;
  position: relative;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

已定位的元素現(xiàn)在相對(duì)于 < body> 元素。

介紹z-index

所有這些絕對(duì)定位是很好的樂趣，但還有另一件事，我們還沒有考慮到 - 當(dāng)元素開始重疊，什么決定哪些元素出現(xiàn)在其上的其他元素？ 在我們已經(jīng)看到的示例中，我們?cè)诙ㄎ簧舷挛闹兄挥幸粋€(gè)定位的元素，它出現(xiàn)在頂部，因?yàn)槎ㄎ坏脑貏龠^未定位的元素。 當(dāng)我們有多個(gè)？

嘗試添加以下到您的CSS，使第一段絕對(duì)定位太:

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
}

此時(shí)，您將看到第一段的顏色為綠色，移出文檔流程，并位于原始位置上方一點(diǎn)。 它也堆疊在原始的 .positioned 段落下，其中兩個(gè)重疊。 這是因?yàn)?code> .positioned 段落是源順序中的第二個(gè)段落，并且稍后在源順序中定位的元素將在源順序中先前定位的元素上。

您可以更改堆疊順序嗎？ 可以，您可以使用 z-index 屬性。 "z-index"是對(duì)z軸的參考。 你可以從源代碼中的上一點(diǎn)回想一下，我們使用水平(x軸)和垂直(y軸)坐標(biāo)來討論網(wǎng)頁，以確定像背景圖像和陰影偏移之類的東西的位置。 (0,0)位于頁面(或元素)的左上角，x和y軸跨頁面向右和向下(對(duì)于從左到右的語言，無論如何)。

網(wǎng)頁也有一個(gè)z軸 - 一條從屏幕表面到你的臉(或你喜歡在屏幕前面的任何其他東西)的虛線。 / Web / CSS / z-index"> z-index 值會(huì)影響定位元素位于該軸上的位置 - 正值將它們向上移動(dòng)到堆棧頂部，負(fù)值將它們向下移動(dòng) 堆棧。 默認(rèn)情況下，定位的元素都有一個(gè) z-index auto，實(shí)際上是0。

要更改堆疊順序，請(qǐng)嘗試將以下聲明添加到您的 p:nth-of-type(1)規(guī)則中:

z-index: 1;

你現(xiàn)在應(yīng)該看到完成的例子:

<h1>z-index</h1>

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

<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p>

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

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></p>

body {
? width: 500px;
? margin: 0 auto;
  position: relative;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

p:nth-of-type(1) {
  position: absolute;
  background: lime;
  top: 10px;
  right: 30px;
  z-index: 1;
}

注意， z-index 只接受無單位索引值; 你不能指定你想要一個(gè)元素是Z軸上23像素 - 它不工作這樣。 較高的值將高于較低的值，這取決于您使用的值。 使用2和3將產(chǎn)生與300和40000相同的效果。

還要注意，我們?cè)谶@里只真正討論了一個(gè)單一的定位上下文。 如果你在同一頁面中有兩組不同的定位元素，并且希望使它們重疊，并使堆疊順序以某種特定的方式工作，那么事情會(huì)變得復(fù)雜。 幸運(yùn)的是，你很少會(huì)遇到這種與z-index的復(fù)雜性。 如果你想閱讀關(guān)于z-index如何工作的更多細(xì)節(jié)，請(qǐng)查看 index"class ="external"> Web標(biāo)準(zhǔn)課程z-index writeup 。 在這篇文章中，我們?yōu)槟峁┝嗽谶@個(gè)階段在學(xué)習(xí)中需要了解的所有信息。

固定定位

還有一種類型的定位覆蓋 - 固定。 這與絕對(duì)定位的工作方式完全相同，但有一個(gè)主要區(qū)別 - 而絕對(duì)定位會(huì)將元素固定在相對(duì)于 >< html> 元素或其最接近的已定位祖先，固定定位將元素相對(duì)于瀏覽器視口本身固定在適當(dāng)位置。 這意味著您可以創(chuàng)建固定的有用的UI項(xiàng)目，如持久導(dǎo)航菜單。

讓我們舉一個(gè)簡(jiǎn)單的例子來說明我們的意思。 首先，從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)在，我們要提供 < h1> 元素 position:fixed; ，并讓它坐在視口的頂部中心。 將以下規(guī)則添加到CSS:

h1 {
  position: fixed;
  top: 0px;
  width: 500px;
  margin: 0 auto;
  background: white;
  padding: 10px;
}

需要 top:0; 才能使其粘貼到屏幕頂部; 我們?nèi)缓蠼o標(biāo)題與內(nèi)容列相同的寬度，并使用忠實(shí)的舊 margin:0 auto; 把它置于中心。 然后我們給它一個(gè)白色背景和一些填充，所以內(nèi)容將不會(huì)在它下面可見。

如果您現(xiàn)在保存并刷新，您會(huì)看到一個(gè)有趣的小效果，標(biāo)題保持固定，內(nèi)容顯示向上滾動(dòng)并消失在其下。 但是我們可以改進(jìn)這一點(diǎn) - 目前有些內(nèi)容從標(biāo)題下面開始，因?yàn)槎ㄎ坏臉?biāo)題不再出現(xiàn)在文檔流中，所以其他內(nèi)容向上移動(dòng)到頂部。 我們需要把它一點(diǎn)一點(diǎn)地移動(dòng); 我們可以通過在第一段設(shè)置一些頂部邊距來做到這一點(diǎn)。 立即添加:

p:nth-of-type(1) {
  margin-top: 60px;
}

你現(xiàn)在應(yīng)該看到完成的例子:

<h1>Fixed positioning</h1>

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

<p class="positioned">I'm not positioned any more...</p>

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

<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></p>

body {
  width: 500px;
  height: 1400px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

h1 {
  position: fixed;
  top: 0px;
  width: 500px;
  margin: 0 auto;
  background: white;
  padding: 10px;
}

p:nth-of-type(1) {
  margin-top: 60px;
}

實(shí)驗(yàn):位置粘性

有一個(gè)新的定位值可用稱為 position:sticky ，其支持還不是很普遍。 這基本上是相對(duì)位置和固定位置之間的混合，其允許定位的元件像它被相對(duì)定位一樣動(dòng)作，直到其滾動(dòng)到某一閾值點(diǎn)(例如，從視口的頂部10px)，之后它被固定。 有關(guān)詳細(xì)信息和示例，請(qǐng)參閱我們的位置:粘性引用條目。

概要

我相信你有樂趣玩基本定位 - 它是創(chuàng)建復(fù)雜的CSS布局和UI功能背后的基本工具之一。 考慮到這一點(diǎn)，在下一篇文章中，我們將更有趣的定位 - 我們將進(jìn)一步，開始建立一些真實(shí)世界有用的東西。