在CSS中，每個(gè)元素都被一本矩形框所包圍，每個(gè)元素都定了內(nèi)容區(qū)，內(nèi)容區(qū)被內(nèi)邊距（填充）包圍，邊框包圍了內(nèi)容區(qū)和內(nèi)邊距。外邊距在邊框外面用來和其他盒子分隔開來。你可以在下面這張圖中看到這些 

定位 模式定義了一個(gè)盒子在整體布局中將會放置在哪里、每個(gè)盒子怎樣影響在它周圍的盒子。定位模式包含了正常文檔流，浮動流和幾種類型的定位元素

CSS定位屬性有五個(gè)可取值

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

下面我將對前三個(gè)屬性進(jìn)行詳細(xì)地講解，對后面兩個(gè)屬性只是作簡單的介紹 

static是position默認(rèn)的值。每個(gè)position屬性被設(shè)置為static的元素將在正常文檔流中顯示。它們被放置和顯示的規(guī)格在盒模型中定義。 

一個(gè)static定位的元素將會忽略任何top, right, bottom, left, z-index屬性的值。為了使用其中任何一個(gè)值，你必須將元素的position屬性設(shè)置為absolute, relative, fixed之一 inherit和其他所有css屬性一樣，當(dāng)前元素取得和父級元素相同的屬性值。

絕對定位(Absolute Positioning) 

絕對定位的元素完全從正常文檔流中除去。對于包圍它的其他元素而言，它們認(rèn)為絕對定位的元素不存在，就好像將元素的display屬性設(shè)置為none。假如你想保留它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。

你在設(shè)置一個(gè)絕對定位元素的位置時(shí)，top, right, bottom, left四個(gè)屬性，你通常只定義其中的兩個(gè)，top或者left，以及l(fā)eft或者right。它們的默認(rèn)值都是auto 

理解絕對定位的關(guān)鍵是理解它們從哪里開始。假如top值為20px，問題是20px是從哪里開始的。 

一個(gè)絕對定位元素的起點(diǎn)位置是相對于它第一個(gè)postion屬性值不為static的父級元素而言的。假如在父級元素鏈中沒有滿足條件的，絕對定位元素就是相對于整個(gè)文檔窗口來定位的。

關(guān)于”相對“這個(gè)概念你或許有點(diǎn)疑惑，特別是還有個(gè)我們還沒有談到的”相對定位”的東西。 

當(dāng)你為一個(gè)元素設(shè)置position:absolute，css將會看這個(gè)元素的父元素，如果父元素被定位過（除了static），那么絕對定位元素的起點(diǎn)是父元素的左上角位置。

假如父元素沒有被應(yīng)用除static以外的positon定位，那么就檢查父元素的父元素有沒有應(yīng)用除static以外的position定位。假如有，絕對定位元素的起點(diǎn)就是這個(gè)元素的左上角位置。假如沒有，繼續(xù)在DOM樹上查找，知道找到一個(gè)應(yīng)用除static以外的定位元素，或者查找失敗，到達(dá)最外層的瀏覽器窗口。 

相對定位（Relative Positoning） 

相對定位也是根據(jù)top, right, bottom, left屬性來定位。但是只是相對于它們原來的位置進(jìn)行移動。這意味著，添加相對定位和添加外邊距有些相似。但也有一個(gè)重要的不同之處，圍繞在相對定位元素附近的元素會忽略相對定位元素的偏移 

我們可以把它看做是一張圖片的重像從真實(shí)的圖片位置開始進(jìn)行一點(diǎn)移動。它原始圖片所占據(jù)的位置仍然保留，但我們已經(jīng)沒法再看到它，只能看到它的重像。這樣就讓元素之間可以進(jìn)行位置的重疊，因?yàn)橄鄬τ诙ㄎ辉啬軌蛞苿拥狡渌厮紦?jù)的空間中。 

相對定位元素從正常文檔流中脫離，但是它仍然影響著圍繞著它的元素。圍繞著它的元素表現(xiàn)的好想相對定位元素仍在處在正常流中一樣。

我們不需要在這里詢問相對誰進(jìn)行定位。答案是，始終是相對于正常文檔流。相對定位好像為元素添加外邊距（margin），但是對相鄰的元素而言好想什么也沒有發(fā)生。實(shí)際上沒有添加外邊距。

固定定位（Fixed Positioning）

固定定位和絕對定位有些相像，但是也有一些不同 

首先，固定定位始終相對于瀏覽器窗口進(jìn)行定位，然先取得top, right, bottom, left,屬性值來進(jìn)行定位。它脫離了它的父級元素，它定位元素中它表現(xiàn)得有點(diǎn)反叛。 

第二個(gè)不同點(diǎn)是在名字上繼承的。固定元素始終時(shí)固定的。當(dāng)頁面固定時(shí)他們不會移動。你告訴它該在哪里固定，它就始終在那里。這樣，他們看起來似乎又不是那么反叛。 

在某種意義上，固定定位元素有點(diǎn)像固定定位的背景圖片，只不過它的外層容器始終時(shí)瀏覽器窗口罷了。如果你在body中設(shè)置一個(gè)背景圖片，那么它與一個(gè)固定定位元素的行為非常相像。只不過在位置的位置不是那么精確。 

背景圖片也不會改變其在第三維度的位置，也因此帶來了z-index屬性 

z-index，打破平面 

一個(gè)頁面是二位平面，它有寬和高。我們活在一個(gè)用z-index作為其深度的三維世界中，這個(gè)額外的維度能夠穿越一個(gè)平面。 

高z-index值在低z-index值元素上面，并從頁面的上方運(yùn)動。相反地，低z-index值在高z-index值元素下面，并從頁面下方運(yùn)動。 

沒有z-index，定位元素有點(diǎn)兒麻煩。應(yīng)用了z-index，你可以做出一些創(chuàng)造性的東西出來，允許一個(gè)元素在另一個(gè)元素的上方或下方。每個(gè)元素的z-index屬性默認(rèn)值是0， 并且可以使用負(fù)值。 

事實(shí)上，z-index比我這里敘述的要復(fù)雜得多，但細(xì)節(jié)寫在了另外一篇文章里。現(xiàn)在請記住這個(gè)額外維度的基本概念，以及他們的堆疊順序。并且只有定位元素才可以使用z-index屬性 

定位問題（Positioning Issues）

這里有一些常見的定位元素常見的問題，每個(gè)問題都值得了解。

1.你不能對一個(gè)元素同時(shí)使用position屬性和float屬性。因?yàn)閷κ褂檬裁礃拥亩ㄎ环桨竵碚f兩者的指令是相對沖突的。如果你把兩個(gè)屬性都添加到同一個(gè)元素上，那么就期望在CSS中較后的那個(gè)屬性是你想要使用的吧。 

2.Margin不會在絕對定位元素上折疊。假如你有一個(gè)底外邊距是20px的段落，在這個(gè)段落下面正好是一張有30px上外邊距圖片，段落和圖片之間的空白將會是50px（20px+30px），而不是30px(30px > 20px)。這就是眾所周知的外邊距折疊，兩個(gè)外邊距合并（折疊）成一個(gè)。絕對定位元素不會像那樣進(jìn)行margin的折疊，這會使他們跟預(yù)期的不一樣。

3.IE在z-index有些bug。在IE6中，選中元素總是在堆疊元素是上方，而不管它的z-index以及其他圍繞在它周圍的元素的z-index值是多少。 

IE6和IE7在堆疊層上還有其他的問題。IE6由最外層的定位元素的層級來決定哪一組的元素處于層級的最上面，而不是每一個(gè)單獨(dú)的元素自身的層級決定。 

代碼如下: