摘要：在確定頁面元素的準(zhǔn)確位置時(shí)，需要細(xì)致地參考這些邊。它們的位置從下到上依次是為負(fù)的定位元素。本文只介紹了一部分有關(guān)位置的細(xì)節(jié)知識(shí)，如果你也曾對這些內(nèi)容有所困惑，那么希望能有所幫助。

哎，這個(gè)元素怎么跑那里去了？

回想一下，在我們覺得“樣式崩了”，“頁面出bug了”的時(shí)候，是不是會(huì)有相當(dāng)一部分情況都可以描述成上面這句話呢？

我們在寫css的時(shí)候，就會(huì)經(jīng)?？紤]“位置”這個(gè)事。理念就是，所有的頁面元素都應(yīng)該被安排在為它預(yù)定的位置上。畢竟按照計(jì)劃預(yù)定的來，才能有條不紊，不容易出錯(cuò)。

就像一本雜志的編輯，即便文稿都已準(zhǔn)備好，但具體哪篇放在第幾頁的哪里，是要認(rèn)真考慮的。好的雜志應(yīng)該有好的排版。

下面，本文將介紹一些會(huì)影響到“位置”，但一般不太會(huì)知道的要點(diǎn)。

盒模型你一定很熟悉：

在content、padding、border、margin這些區(qū)域之外，請注意圖中的edge，也就是分隔盒模型各區(qū)域的邊。在確定頁面元素的準(zhǔn)確位置時(shí)，需要細(xì)致地參考這些邊。它們按照范圍從小到大分別是：

content edge，也叫做inner edge（注意和JavaScript的innerWidth等區(qū)別開）。它圍成的區(qū)域代表內(nèi)容區(qū)，一般由元素內(nèi)的具體內(nèi)容決定。它確定的范圍叫做content box，也是css屬性box-sizing的默認(rèn)值content-box的范圍。

padding edge。它確定padding box的范圍。盡管w3c規(guī)范已經(jīng)從box-sizing移除了這個(gè)值，但很容易類比理解。

border edge。它確定border box的范圍。

margin edge，也叫做outer edge。它確定margin box的范圍。box-sizing也沒有這個(gè)值。

為什么需要了解這些邊呢？想象一下你想要放置一個(gè)元素到你為它安排的位置上，但是，你拿的元素并不是一個(gè)點(diǎn)（比如物理學(xué)里的質(zhì)點(diǎn)），而是一個(gè)盒子。一個(gè)占據(jù)一定空間的盒子，如果沒有邊作為參照，你能清楚地知道應(yīng)該怎樣去對齊嗎？

背景是很常用的樣式，但有好多地方可能不太會(huì)注意。

背景分為背景圖（background-image）和背景色（background-color），漸變（css gradients）也屬于背景圖。其中，背景圖位于背景色之上。如果使用多個(gè)背景圖（multiple backgrounds），聲明靠前的位于上方。

除background-clip之外的其他背景屬性，如background-position、background-size等，都只作用于背景圖，對背景色沒有作用。這是可以理解的，因?yàn)楸尘吧軉渭?，它沒有起點(diǎn)和終點(diǎn)，總是鋪滿整個(gè)空間，要么有，要么沒有。

現(xiàn)在，一個(gè)元素div.bg-element定義了這樣的css：

.bg-element{
    width: 100px;
    height: 100px;
    margin: 20px;
    padding: 20px;
    border: 5px dashed #386365;
    background: #2aace9 url(pattern.png) no-repeat;
}

這是一個(gè)同時(shí)有背景圖和背景色的元素，而且有內(nèi)外邊距及邊框，其效果是：

可以看出，在默認(rèn)情況下，背景圖的起始點(diǎn)為padding box的左上角，而背景色沒有起始點(diǎn)，將鋪滿整個(gè)border box（為了看到這一點(diǎn)，特意用了dashed邊框）。雖然這個(gè)例子中的背景圖好像限制在padding box范圍內(nèi)，但實(shí)際上，它和背景色的可見范圍是一樣的，都是border box，用background-position或background-repeat稍作修改即可驗(yàn)證：

這個(gè)背景可見范圍的概念，對應(yīng)了css3新增屬性background-clip。這個(gè)屬性的默認(rèn)值就是border-box。如果更改它，會(huì)是這樣：

無論怎么修改可見范圍，這個(gè)例子中的背景圖的起始點(diǎn)都是padding box左上角，這就是背景圖起始點(diǎn)的概念。它對應(yīng)的是css3中新增的background-origin，其默認(rèn)值正是padding-box。如果修改了background-origin，那么屬性background-position產(chǎn)生的位置偏移，包括right、bottom等關(guān)鍵字的情況，都會(huì)對應(yīng)地改變參考的邊。

外邊距區(qū)域不會(huì)有背景。前文的盒模型的圖里，margin和transparent一起也是這個(gè)意思。

你一定用過這樣的定位搭配：position: relative;的父元素，加上position: absolute;的子元素。

這比較像建立一個(gè)xy平面坐標(biāo)系，然后把元素放置在自己想要的坐標(biāo)位置上。但是，x軸、y軸、原點(diǎn)、坐標(biāo)點(diǎn)，它們分別在哪里呢？

請看這個(gè)例子：

.pos-container{
    position: relative;
    width: 140px;
    height: 140px;
    margin: 20px;
    padding: 20px;
    border: 5px dashed #789;
}
.pos-element{
    position: absolute;
    width: 70px;
    height: 70px;
    margin: 10px;
    padding: 20px;
    border: 5px dashed #a74;
    background: #e5c5a5;
    left: 0;
    top: 0;
}

得到的結(jié)果是：

由于邊框是明顯的有視覺效果的部分，因此border edge的位置很容易確定。注意兩個(gè)元素都有完整的內(nèi)外邊距和邊框，而此時(shí)div.pos-element的坐標(biāo)是(0, 0)，圖中間距為10px。經(jīng)過分析可以得知，這個(gè)10px間距來自div.pos-element的margin。所以可以得到什么結(jié)論呢？結(jié)論如下：

首先，網(wǎng)頁的平面坐標(biāo)系和通常的數(shù)學(xué)平面直角坐標(biāo)系不同，y軸的正方向是朝下的。事實(shí)上，包括Photoshop、Flash等平面設(shè)計(jì)在內(nèi)的界面，都使用這樣的坐標(biāo)系。

這種搭配的情況下，構(gòu)成坐標(biāo)系xy軸的是用作容器的元素的padding edge。其中padding edge的左上角即為坐標(biāo)系的原點(diǎn)。

絕對定位的元素設(shè)置的left、top所形成的坐標(biāo)位置點(diǎn)，位于該元素的margin edge的左上角。也就是，定位元素是用margin edge的左上角這個(gè)點(diǎn)來對齊坐標(biāo)的。

此外，構(gòu)成定位參考坐標(biāo)系的是包含塊，而不一定是直接父元素。

包含塊（containing block）是css規(guī)范的視覺格式化模型（visual formatting model）中的概念，它是一個(gè)邏輯的矩形框，用于css的定位及尺寸的計(jì)算，并不限制內(nèi)部元素的位置，可以溢出。它和盒模型的關(guān)系可以這樣描述：一個(gè)DOM元素對應(yīng)一個(gè)盒模型，盒模型的某一條邊（這不是固定的）將標(biāo)明該DOM元素創(chuàng)建的包含塊范圍。

一般情況下，一個(gè)DOM元素的子元素（以及這些子元素的盒模型）以這個(gè)DOM元素的content edge作為包含塊的邊界。

特別地，在這種position: relative;的父元素及position: absolute;的子元素的搭配中，絕對定位的子元素以父元素的padding edge作為自己的包含塊的邊界。

更具體的包含塊的邊界判定可以參考W3C的說明。

在確定一個(gè)DOM元素的位置時(shí)，我們需要考慮它的定位方案（positioning schemes）。一個(gè)DOM元素可以選擇以下三個(gè)方案：

普通流（normal flow）。如果你對這個(gè)元素什么也沒干，那就是它了。

浮動(dòng)（floats）。當(dāng)元素的float屬性設(shè)置了left或right后。

絕對定位(absolute positioning)。當(dāng)元素的position屬性設(shè)置了absolute或fixed后。

如果一個(gè)DOM元素既設(shè)置了浮動(dòng)又設(shè)置了絕對定位，那么它是絕對定位（float會(huì)被重置為none的計(jì)算值）。

你也許聽說過“脫離文檔流”這樣的詞匯，它在css里是確實(shí)存在的概念，原詞是out of flow。如果一個(gè)元素的定位方案是浮動(dòng)或絕對定位，又或者這個(gè)元素是根元素（root element），就稱這個(gè)元素是脫離文檔流（out of flow）的。

同一層級的兄弟元素，同時(shí)有普通流、浮動(dòng)、絕對定位這三種定位方案時(shí)，它們之間的相互關(guān)系是怎樣的？

要理清這個(gè)相互關(guān)系，需要理解脫離文檔流具體是什么意思。

css規(guī)范中這樣描述絕對定位：

In the absolute positioning model, a box is removed from the normal flow entirely and assigned a position with respect to a containing block.

請注意這里的entirely，這是在說，絕對定位是完全脫離文檔流的。為什么要強(qiáng)調(diào)完全呢？

因?yàn)?，脫離文檔流是一個(gè)比較曖昧的概念，還有不完全的。請看浮動(dòng)的描述：

In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible.

前文已經(jīng)說過，浮動(dòng)被歸類為out of flow，也就是脫離文檔流，但這里卻提到了先基于文檔流取得一次位置，然后再向左或向右移動(dòng)。所以，浮動(dòng)不是完全脫離文檔流的。

之前看到過別人的這樣一個(gè)提問：

對應(yīng)html代碼（css省略）：

    
normal
    
float

按照傳統(tǒng)的“浮動(dòng)元素是脫離文檔流的”的理解，為什么這個(gè)右浮動(dòng)元素只是浮動(dòng)到了它所在行的右邊，而不是整個(gè)容器的右上角呢？

答案就是，浮動(dòng)不是完全脫離文檔流的。這有兩方面的意思。

一方面，浮動(dòng)可以影響文檔流。你一定見過把一段文字里的某一個(gè)圖片浮動(dòng)，來制造文字環(huán)繞圖片效果的用法：

這些位于文檔流內(nèi)的文字，仍然會(huì)為浮動(dòng)元素留出空間，而并非互不相干。這其實(shí)是浮動(dòng)元素影響行框（line box）的寬度的結(jié)果。

另一方面，浮動(dòng)會(huì)受到文檔流的影響。規(guī)范里列出的浮動(dòng)元素的精確特性規(guī)則中有這樣一條：

The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

這里的outer top就是margin edge (outer edge)的top edge。意思是，浮動(dòng)元素不可以高于任何在源文檔之前的塊元素或浮動(dòng)元素。我們很熟悉浮動(dòng)元素是會(huì)一個(gè)接一個(gè)地尋找空間排列的，但這一條卻告訴我們，如果前面還有塊元素，那么它們也會(huì)影響浮動(dòng)元素的上邊緣位置。

請看這個(gè)例子：

如果一個(gè)浮動(dòng)元素之前還有其他的浮動(dòng)元素，那么會(huì)考慮到它們，而可能排列到一個(gè)更靠下的位置。那么，如果之前還有塊元素，而且占據(jù)了更大的位置呢？從上圖可以看到，浮動(dòng)元素同樣會(huì)將其考慮在內(nèi)。

這就是前面的提問的詳細(xì)解釋了。

絕對定位大部分時(shí)候并不像浮動(dòng)這樣讓人困惑。顯然，它被定義為“完全脫離文檔流”，就是說它和文檔流的關(guān)聯(lián)很弱，一般只根據(jù)包含塊和坐標(biāo)來確定位置就可以了。

完全脫離文檔流，也仍然不是說和文檔流毫不相干，各自為政。它的意思是：這個(gè)元素在參與布局時(shí)，不會(huì)影響在它之后的兄弟元素。絕對定位元素，在left、top等定位屬性取值auto的時(shí)候，仍然會(huì)根據(jù)文檔流取得一個(gè)可用的計(jì)算值。

如果有重疊，就要考慮覆蓋關(guān)系了。它們的位置從下到上依次是：

z-index為負(fù)的定位元素。

普通流（normal flow）的非行內(nèi)元素。

浮動(dòng)元素。

普通流的行內(nèi)元素。

z-index為auto或0的定位元素。

z-index為正值的定位元素。

想要讓元素穩(wěn)定地待在為它預(yù)定的位置上，還是有很多功課要做的。本文只介紹了一部分有關(guān)位置的細(xì)節(jié)知識(shí)，如果你也曾對這些內(nèi)容有所困惑，那么希望能有所幫助。

（重新編輯自我的博客，原文地址：http://acgtofe.com/posts/2015/10/xyz-in-css）