當在這一個頁面上實現(xiàn)布局和定位有幾種不同的技術。使用哪種技術，很大程序上取決于內(nèi)容和目標頁面，因為有很多技術比別人的更牛。
例如，浮動可以讓頁面元素并排顯示，而且還可以制作一個干凈的布局。然而，有時候需要一些嚴格的定位，這時需要使用其他的技術，包括“relative”和“absolute”定位。
在這節(jié)課中，我們先來介紹一下浮動的使用，接下來詳細介紹定位的技巧，包括如何準確的給元素在X軸、Y軸和Z軸定位。

• 包含浮動
• 定位屬性
• z-index屬性

包含浮動

創(chuàng)建一全頁面的布局時，浮動是一種常用的方法，也是頁面元素定位的一種基本功能。浮動可以讓元素一個挨著一個。浮動可以創(chuàng)建一個自然流布局，同時充許元素設置自身尺寸和其父元素容器的尺寸大小。

當元素浮動時，一個元素的位置依賴于放置在他周邊的其他元素。那么圍繞在他周邊的是哪個元素呢？這個元素會換行嗎？這一切都取決于圍繞于他的元素的DOM（文檔對象模型）。

DOM是什么？
DOM是Document Object Model的簡稱，被譯為文檔對象模型。是HTML或者XML文檔結構的API。在我們的例子中，我們說的是HTML的文檔，因此DOM就是代表所有元素以及這些元素之間的關系。
可以考慮樹形的表現(xiàn)方式，展元素元素之間的關系。元素嵌套時他們存在父子關系，相同級別的還存在兄弟關系。

雖然浮動相當?shù)慕o力，但他們自己還是存在一定的問題。最典型的問題就是一個父元素包含了多個浮動的子元素。頁面的內(nèi)容設置了一個寬度，子元素的浮動確定了他們的位置，但浮動元素不會影響父元素的寬度。這樣做會讓父元素塌陷，從而使父元素的高度為“0”，以及忽略其他的屬性。很多時候，這種現(xiàn)像都被忽略，特別是在父元素沒有任何樣式，以及其子元素看起來都正確的對齊。

嵌套的元素不會正確的排列，也會有錯誤的樣式出現(xiàn)。來看看下面的演示，在“.box-set”的div應該有一個高亮的灰色背景，因為所有的子元素浮動后，這個灰色的背景色并不看到。仔細檢查后，“.box-set”的高度變成了“0”。

HTML
<code><div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div> </code>

CSS
<code>.box-set {
background: #e8eae9;
}
.box {
background: #8ec63f;
height: 100px;
float: left;
margin: 10px;
width: 200px;
} </code>

DEMO效果

包含浮動

有一種方法，在容器的結束標簽前添加一個空標簽，在空標簽上直接設置樣式“clear:both”。用這種方法來清除浮動，在大多數(shù)情況下是有效的，但這不太適合語義化。這取決于一個頁面有多少浮動需要清除，這樣造成頁面上的空標簽迅速堆積，而且在頁面中沒有上下文內(nèi)容。

幸運的是有幾種不同方法可以用來清除浮動，而其中用得最多的是“overflow”技巧和"clearfix"技巧。

Overflow技巧
一種清除浮動的技巧是使用“overflow”屬性。在具有浮動元素的父容器中設置“overflow”的屬性值為“auto”，這樣父容器就會有一個高度存在，在我們例子中的灰色背景也就能看得到了。

在IE6里面，父容器是需要設置一個“width”和“height”。因為高度可能是一個變量，寬度為100%，他們將能正常的工作。使用“overflow:auto;”,在IE瀏覽器中會給元素添加滾動條，這樣一來，最好是直接使用“overflow:hidden;”來清除浮動。

<code>.box-set { background: #404853; overflow: auto;} </code>

清除浮動后效果

包含浮動

不同的瀏覽器對“overflow”屬性解析不一樣，在瀏覽器的顯示風格也不一樣。看看下面的例子，注意列在不同瀏覽器的顯示效果。

包含浮動

“clearfix”技巧是基于在父元素上使用“:before”和“:after”兩個偽類。使用這些偽類，我們可以在浮動元素的父容器前面和后面創(chuàng)建隱藏元素。“:before”偽類是用來防止子元素頂部的外邊距塌陷，使用“display: table”創(chuàng)建一個匿名的“table-cell”元素。這也確保在IE6和IE7下具有一致性。“:after”偽類是用來防止子元素的底部的外邊距塌陷，以及用來清除元素的浮動。

在IE6和7的瀏覽器中，加上“*zoom”屬性來觸發(fā)父元素的hasLayout的機制。決定了元素怎樣渲染內(nèi)容，以及元素與元素之間的相互影響。

采取上面同樣的例子，你可以看到容器也清除了浮動，元素也可以移到父容器外面：
<code>.box-set:before,.box-set:after {
content: "";
display: table;
}
.box-set:after {
clear: both;
}
.box-set {
*zoom: 1;
} </code>

清除浮動后效果

包含浮動

一個常見的方法是將定義一個類名，把這個類名加到需要清除浮動的容器上。例如使用“clearfix”清除浮動，Dan Cederholm為容器設置了一個類名“group”。在需要清除浮動的容器上添加這個類名“group”。
<code>.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
*zoom: 1;
}</code>

單個偽類
值得注意的是，目前每個元素只有一個“:before”和“:after”偽類。當你嘗試使用其他的“:before”和“:after”的clearfix技巧，你的內(nèi)容可能無法達到想要的效果。

在上面的例子中，clearfix的樣式不應該直接插入到“.box-set”類中，應該是給需要清除浮動的元素中添加類名“group”。

定位屬性
很多情況下，你需要控制更多元素的位置，而且超過了浮動所能提供的范圍，這個時候我們就需要發(fā)揮“position”屬性的作用。“position”屬性提供五個不同的屬性值，每種不同的方式可以給元素提供不同的位置。

Position static
元素都有position屬性，其默認值是“static”，這也意味著，他們沒有也不接受位置屬性設置（top、right、bottom、left屬性值設置）。另外元素設置了position屬性，將會覆蓋元素的默認值“static”。

在下面的演示中，所有的盒子都是靜態(tài)的，每個盒子都在相鄰盒子頂部，因為他們都是塊元素，而且沒有進行浮動設置。

HTML
<code><div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div> </code>

CSS
<code>.box-set {
background: #e8eae9;
}
.box {
background: #8ec63f;
height: 80px;
width: 80px;
}</code>

效果

包含浮動

盒子位移屬性是如何工作？
盒子的位移屬性有四個“top、right、bottom和left”，用來指定元素的定位位置和方向。這些屬性只能在元素的“position”屬性設置了“relative、absolute和fixed”屬性值，才生效。
對于相對定位元素，這些屬性的設置讓元素從默認位置移動。例如，top設置一個值“20px”在一個相對定位的元素上，這個元素會在原來位置向下移動“20px”。反之，“top”設置一個“-20px”，這個元素會在原來的位置向上移動“20px”。
對于絕對定位和固定定位鮮紅，這些屬性指定了元素與父元素邊緣之間的距離，例如，絕對定位的元素設置一個“top”值為“20px”，將使絕對定位元素相對于其設置了相對定位的祖先元素頂部邊緣向下移動“20px”，反之，如果設置一個“top”值為“-20px”，將使絕對定位元素相對于其設置了相對定位的祖先元素頂部邊緣向上移動“20px”。（絕對定位的參考點是其祖先元素設置了“relative”或者“absolute”值）。

設置了位移屬性的相對定位元素，他在頁面中仍然是正常的、靜態(tài)的，仍屬于自然流。在這種情況下，其他元素不會占用相對定們元素當初的位置。此外，其他元素沒有進行位置移動時，相對定位元素可能會和其他元素重疊。

在下面的演示中，每個元素還是在另一個元素頂部，然后他們根據(jù)自己移位屬性，從默認位置進行移動，由于他們移向方向不一樣，這些值使元素重疊在一起。當元素設置了相對定時，周邊的元素也能看到相對定位元素的默認位置。（也就是說，相對定位元素的默認位置還是被元素自身占用，別的元素是無法占用的。也就是說相對定位元素的位移是相對于元素自身的邊緣進行位移）。

HTML
<code><div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div></code>

CSS
<code>.box-set {
background: #e8eae9;
}
.box {
background: #8ec63f;
height: 80px;
position: relative;
width: 80px;
}
.box-1 {
top: 20px;
}
.box-2 {
left: 40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}</code>

效果：

相對定位

Position absolute
絕對定位元素也具有盒子位移屬性，然而，絕對定位元素會脫離文檔流。絕對定位元素直接從文檔流中移出，絕對定位元素的位置直接和父容器是否設置了相對定位（絕對定位）有直接關系。絕對定位元素需要至少一個祖先元素設置了相對定位（絕對定位），不然元素定位會相對于頁面的主體進行定位。

使用絕對定位的元素可以指定垂直和水平的位移屬性，使絕對定位元素相對于設置了相對定位的祖先元素邊緣進行移位。例如，一個絕對定位的元素設置了“top”值為“50px”和一個“right”值為“100px”,絕對定位元素會相對于其設置了相對定位的父元素的頂邊向下移動50px;向左移動100px。

然而，使用了絕對定位的元素并沒有進行任何盒子位移屬性設置，那么絕對定位元素的頂部和左部會和設置了相對定位的父元素的頂邊和左邊重合。如果設置了一個盒子位移屬性，比如說“top”，那么絕對定位元素垂直方向會進行移動，而水平位置默認還是左邊對齊。
在下面的演示中，你可以看到所有的盒子都相對于div的父元素進行絕對定位，每個元素都從特定的面使用定位值進行移動，而且使用了負值的，元素移動到盒子的外面。

HTML
<code><div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div></code>

CSS
<code>.box-set {
background: #e8eae9;
height: 200px;
position: relative;
}
.box {
background: #8ec63f;
height: 80px;
position: absolute;
width: 80px;
}
.box-1 {
top: 6%;
left: 2%;
}
.box-2 {
top: 0;
right: -40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}
.box-4 {
bottom: 0;
}</code>

效果

絕對定位

當一個絕對定位的元素沒有明確指定高度和寬度，同時使用盒子位移的“top”和“bottom”屬性時，會使整個元素的高度跨越整個容器。同樣的，當這個元素同時使用位移“l(fā)eft”和“right”屬性值，會使整個元素的寬度跨越整個容器。如果同時使用位移四個屬性，可以指定一個寬度和高度顯示元素。（這個時候絕對定位元素的寬度和高度都是100%。）

Position fixed
固定定位和絕對定位很類似，但是他定位是相對于瀏覽器窗口，并且不會隨滾動條進行滾動。也就是說，不管用戶停留在頁面那個地方，固定定位的元素將始終停留在頁面的一個地方。“position”屬性值中，僅有“fixed”屬性值不能在IE6瀏覽器下運行，如果你想在IE6正常使用固定定位，那么你就需要為他寫一些Hacks。
固定定位元素的盒子位移屬性的使用和絕對定位的一樣。
保持前面盒子移位，可以看到盒子固定定位是相對于瀏覽器窗口而不是設置了相對定位的父元素。

HTML
<code><div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div></code>

CSS
<code>.box {
background: #8ec63f;
height: 80px;
position: fixed;
width: 80px;
}
.box-1 {
top: 6%;
left: 2%;
}
.box-2 {
top: 0;
right: -40px;
}
.box-3 {
bottom: -10px;
right: 20px;
}
.box-4 {
bottom: 0;
}</code>

效果

絕對定位

HTML
<code>< footer >Fixed Footer </footer></code>

CSS
<code>footer {
bottom: 0;
left: 0;
position: fixed;
right: 0;
}</code>

固定定位

一般來說，在DOM中，元素出現(xiàn)的時候就放置在z軸上。在Dom中，元素在頂部的要低于底部的。改變這種層疊順序可以直接使用“z-index”來控制。元素的“z-index”值越高將會出現(xiàn)在越上面，不管元素在Dom哪個位置上。

給元素設置“z-index”屬性，首先要在這個元素上設置了“position”屬性值為“relatvie”、“absolute”或者“fixed”之一。同樣的，你要使用盒子位移屬性，你也要先確認元素設置了“positions”屬性值為“relative”、“absolute”或者“fixed”之一。
在下面的登例子中，如果每個盒子都不設置“z-index”，那么第一個box在第二個下面，第二個在第三個下面，第三個在第四個下面。如果在盒子中指定“z-index”的值，第二個盒子在第一個和第三個上面，第三個盒子在第四個上面。

HTML
<code><div class="box-set">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div></code>

CSS
<code>.box-set {
background: #e8eae9;
height: 160px;
position: relative;
}
.box {
background: #8ec63f;
border: 3px solid #f7941d;
position: absolute;
}
.box-1 {
left: 10px;
top: 10px;
}
.box-2 {
bottom: 10px;
left: 70px;
z-index: 3;
}
.box-3 {
left: 130px;
top: 10px;
z-index: 2;
}
.box-4 {
bottom: 10px;
left: 190px;
z-index: 1;
}</code>

不設置z-index效果

固定定位

固定定位

本文由大漠根據(jù)Shay Howe的《An Adavnced Guide to HTML & CSS》第二課《Detailed Positioning》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處：http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning，以及作者相關信息
作者：Shay Howe
譯者：大漠