當(dāng)人們剛接觸布局的時(shí)候都比較傾向于使用定位的方式。因?yàn)槎ㄎ坏母拍羁雌饋?lái)好像比較容易掌握。表面上你確切地指定了一個(gè)塊元素所處的位置那么它就會(huì)坐落于那里。可是定位比你剛看到的時(shí)候要稍微復(fù)雜一點(diǎn)。對(duì)于定位來(lái)說(shuō)，有一些東西會(huì)絆倒新手，所以在它成為你的慣用技巧前你需要掌握它們。

　　一旦你更深入地了解了它是怎么運(yùn)作的，你就能夠做出一些更棒的事情來(lái)。
　　CSS盒模型和定位的類型

　　為了搞清楚定位首先你得了解CSS盒模型。在上一句中的鏈接是我寫(xiě)在InstantShift 中的一篇關(guān)于盒模型的文章。我在那篇文章做了詳細(xì)的講解并會(huì)在這篇文章中做一個(gè)快速的總結(jié)。

　　在CSS中，每一個(gè)元素都由一個(gè)矩形盒子所包含。每一個(gè)盒子都會(huì)具有一個(gè)內(nèi)容區(qū)，內(nèi)容區(qū)被一個(gè)內(nèi)邊距所包裹，內(nèi)邊距外是盒子的邊框，并且在邊框之外會(huì)有一個(gè)外邊距用于與其他盒子分隔開(kāi)來(lái)。這些你可以從下面這張圖片看到。

　定位模式規(guī)定了一個(gè)盒子在總體的布局上應(yīng)該處于什么位置以及對(duì)周圍的盒子會(huì)有什么影響。定位模式包括了常規(guī)文檔流，浮動(dòng)，和幾種類型的 position 定位的元素。

　　CSS position 屬性可以取5種值：

    position: absolute
    position: relative
    position: fixed
    position: static
    position: inherit

　　我會(huì)在下面對(duì)前三個(gè)值進(jìn)行詳細(xì)的闡述并簡(jiǎn)單地講解一下最后兩個(gè)值。

　　static 是 position 默認(rèn)的屬性值。任何應(yīng)用了 position:static 的元素都處于常規(guī)文檔流中。它處于什么位置以及它如何影響周邊的元素都是由盒模型所決定的。

　　一個(gè) static 定位的元素會(huì)忽略所有 top，right，bottom，left 以及 z-index 屬性所聲明的值。為了讓你的元素能使用任何的這些屬性，你需要先為它的 position 屬性應(yīng)用這三個(gè)值的其中之一： absolute，relative，fixed

　　position 值為 inherit 的元素和其他所有屬性的繼承值一樣，元素只是簡(jiǎn)單地應(yīng)用了與父元素一樣的 position 值。
　　絕對(duì)定位（Absolute Positioning）

　　絕對(duì)定位的元素會(huì)完全地從常規(guī)文檔流中脫離。對(duì)于包圍它的元素而言，它會(huì)將該絕對(duì)定位元素視為不存在。就好像 display 屬性被設(shè)為 none 一樣。如果你想要保持它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。

　　你可以通過(guò) top, right, bottom, 和 left 四個(gè)屬性來(lái)設(shè)置絕對(duì)定位元素的位置。但你通常只會(huì)設(shè)置它們其中的兩個(gè)，top 或者 bottom，以及 left 或者 right。默認(rèn)地它們的值都為 auto。