本文由大漠根據Shay Howe的《An Adavnced Guide to HTML & CSS》第二課《Detailed Positioning》所譯，整個譯文帶有我們自己的理解與思想，如果譯得不好或不對之處還請同行朋友指點。如需轉載此譯文，需注明英文出處：http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning，以及作者相關信息
作者：Shay Howe
譯者：大漠
當在這一個頁面上實現布局和定位有幾種不同的技術。使用哪種技術，很大程序上取決於內容和目標頁面，因為有很多技術比別人的更牛。
例如，浮動可以讓頁面元素並排顯示，而且還可以制作一個干凈的布局。然而，有時候需要一些嚴格的定位，這時需要使用其他的技術，包括“relative”和“absolute”定位。
在這節課中，我們先來介紹一下浮動的使用，接下來詳細介紹定位的技巧，包括如何准確的給元素在X軸、Y軸和Z軸定位。
包含浮動
創建一全頁面的布局時，浮動是一種常用的方法，也是頁面元素定位的一種基本功能。浮動可以讓元素一個挨着一個。浮動可以創建一個自然流布局，同時充許元素設置自身尺寸和其父元素容器的尺寸大小。
當元素浮動時，一個元素的位置依賴於放置在他周邊的其他元素。那么圍繞在他周邊的是哪個元素呢？這個元素會換行嗎？這一切都取決於圍繞於他的元素的DOM（文檔對象模型）。
DOM是什么？
DOM是Document Object Model的簡稱，被譯為文檔對象模型。是HTML或者XML文檔結構的API。在我們的例子中，我們說的是HTML的文檔，因此DOM就是代表所有元素以及這些元素之間的關系。
可以考慮樹形的表現方式，展元素元素之間的關系。元素嵌套時他們存在父子關系，相同級別的還存在兄弟關系。
雖然 浮動相當的給力，但他們自己還是存在一定的問題。最典型的問題就是一個父元素包含了多個浮動的子元素。頁面的內容設置了一個寬度，子元素的浮動確定了他們的位置，但浮動元素不會影響父元素的寬度。這樣做會讓父元素塌陷，從而使父元素的高度為“0”，以及忽略其他的屬性。很多時候，這種現像都被忽略，特別是在父元素沒有任何樣式，以及其子元素看起來都正確的對齊。
嵌套的元素不會正確的排列，也會有錯誤的樣式出現。來看看下面的演示，在“.box-set”的div應該有一個高亮的灰色背景，因為所有的子元素浮動后，這個灰色的背景色並不看到。仔細檢查后，“.box-set”的高度變成了“0”。
HTML
<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
CSS
.box-set { background: #e8eae9; } .box { background: #8ec63f; height: 100px; float: left; margin: 10px; width: 200px; }
DEMO效果
有一種方法，在容器的結束標簽前添加一個空標簽，在空標簽上直接設置樣式“clear:both”。用這種方法來清除浮動，在大多數情況下是有效的，但這不太適合語義化。這取決於一個頁面有多少浮動需要清除，這樣造成頁面上的空標簽迅速堆積，而且在頁面中沒有上下文內容。
幸運的是有幾種不同方法可以用來清除浮動，而其中用得最多的是“overflow”技巧和"clearfix"技巧。
Overflow技巧
一種清除浮動的技巧是使用“overflow”屬性。在具有浮動元素的父容器中設置“overflow”的屬性值為“auto”，這樣父容器就會有一個高度存在，在我們例子中的灰色背景也就能看得到了。
在IE6里面，父容器是需要設置一個“width”和“height”。因為高度可能是一個變量，寬度為100%，他們將能正常的工作。使用“overflow:auto;”,在IE瀏覽器中會給元素添加滾動條，這樣一來，最好是直接使用“overflow:hidden;”來清除浮動。
.box-set { background: #404853; overflow: auto; }
清除浮動后效果
使用“overflow”技巧清除浮動，確實存在一些缺點。例如：當你添加樣式，或者將嵌套在里面的“span”元素移動到父容器的外面，或者你想給元素添加一個盒子陰影和制作一個下拉菜單。在下面的演示例子中，你可以看到元素的盒子陰影被切斷在父元素之內。
不同的瀏覽器對“overflow”屬性解析不一樣，在瀏覽器的顯示風格也不一樣。看看下面的例子，注意列在不同瀏覽器的顯示效果。
clearfix技巧
根據上下文，清除浮動更好的方法是clearfix技巧。“clearfix”清除浮動的技術是有點復雜，但有有比使用“overflow”技巧清除浮動更好的方法？
“clearfix”技巧是基於在父元素上使用“:before”和“:after”兩個偽類。使用這些偽類，我們可以在浮動元素的父容器前面和后面創建隱藏元素。“:before”偽類是用來防止子元素頂部的外邊距塌陷，使用“display: table”創建一個匿名的“table-cell”元素。這也確保在IE6和IE7下具有一致性。“:after”偽類是用來防止子元素的底部的外邊距塌陷，以及用來清除元素的浮動。
在IE6和7的瀏覽器中，加上“*zoom”屬性來觸發父元素的hasLayout的機制。決定了元素怎樣渲染內容，以及元素與元素之間的相互影響。
采取上面同樣的例子，你可以看到容器也清除了浮動，元素也可以移到父容器外面：
.box-set:before, .box-set:after { content: ""; display: table; } .box-set:after { clear: both; } .box-set { *zoom: 1; }
清除浮動后效果
有效的包含浮動
使用哪種技巧來清除浮動，終究要看你自己喜好。有些人堅持使用“clearfix”來清除浮動，因為這種方法可以貫穿整個項目。有些人認為“clearfix”技巧使用的代碼太多，他還是喜歡簡單點的。至於使用什么技巧由您來決定，只要在運用了浮動的元素的父容器需要清除浮動。
一個常見的方法是將定義一個類名，把這個類名加到需要清除浮動的容器上。例如使用“clearfix”清除浮動，Dan Cederholm為容器設置了一個類名“group”。在需要清除浮動的容器上添加這個類名“group”。
.group:before, .group:after { content: ""; display: table; } .group:after { clear: both; } .group { *zoom: 1; }
單個偽類
值得注意的是，目前每個元素只有一個“:before”和“:after”偽類。當你嘗試使用其他的“:before”和“:after”的clearfix技巧，你的內容可能無法達到想要的效果。
在上面的例子中，clearfix的樣式不應該直接插入到“.box-set”類中，應該是給需要清除浮動的元素中添加類名“group”。
定位屬性
很多情況下，你需要控制更多元素的位置，而且超過了浮動所能提供的范圍，這個時候我們就需要發揮“position”屬性的作用。“position”屬性提供五個不同的屬性值，每種不同的方式可以給元素提供不同的位置。
Position static
元素都有position屬性，其默認值是“static”，這也意味着，他們沒有也不接受位置屬性設置（top、right、bottom、left屬性值設置）。另外元素設置了position屬性，將會覆蓋元素的默認值“static”。
在下面的演示中，所有的盒子都是靜態的，每個盒子都在相鄰盒子頂部，因為他們都是塊元素，而且沒有進行浮動設置。
HTML
<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
CSS
.box-set { background: #e8eae9; } .box { background: #8ec63f; height: 80px; width: 80px; }
效果
Position relative
“relative”是“position”的另一個屬性值，他和“static”屬性值非常的相似。主要的區別是“relative”可以給元素設置位移（offset）“top、right、bottom和left”屬性。通過這些位移屬性設置可以給元素進行精確的定位。
盒子位移屬性是如何工作？
盒子的位移屬性有四個“top、right、bottom和left”，用來指定元素的定位位置和方向。這些屬性只能在元素的“position”屬性設置了“relative、absolute和fixed”屬性值，才生效。
對於相對定位元素，這些屬性的設置讓元素從默認位置移動。例如，top設置一個值“20px”在一個相對定位的元素上，這個元素會在原來位置向下移動“20px”。反之，“top”設置一個“-20px”，這個元素會在原來的位置向上移動“20px”。
對於絕對定位和固定定位鮮紅，這些屬性指定了元素與父元素邊緣之間的距離，例如，絕對定位的元素設置一個“top”值為“20px”，將使絕對定位元素相對於其設置了相對定位的祖先元素頂部邊緣向下移動“20px”，反之，如果設置一個“top”值為“20px”，將使絕對定位元素相對於其設置了相對定位的祖先元素頂部邊緣向上移動“20px”。（絕對定位的參考點是其祖先元素設置了“relative”或者“absolute”值）。
設置了位移屬性的相對定位元素，他在頁面中仍然是正常的、靜態的，仍屬於自然流。在這種情況下，其他元素不會占用相對定們元素當初的位置。此外，其他元素沒有進行位置移動時，相對定伴元素可能會和其他元素重疊。
在下面的演示中，每個元素還是在另一個元素頂部，然后他們根據自己移位屬性，從默認位置進行移動，由於他們移向方向不一樣，這些值使元素重疊在一起。當元素設置了相對定時，周邊的元素也能看到相對定位元素的默認位置。（也就是說，相對定位元素的默認位置還是被元素自身占用，別的元素是無法占用的。也就是說相對定位元素的位移是相對於元素自身的邊緣進行位移）。
HTML
<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
CSS
.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; }
效果：
事實上，一個相對定位元素同時設置了“top”和“bottom”位移屬性值，實際上“top”優先級高於“bottom”。然而，一個相對定位元素同時設置了“left”和“right”位移屬性，他們的優先級取決於頁面使用的是哪種語言，例如，如果你的頁面是英文頁面，那么“left”位移屬性優先級高，如果你的頁面是阿拉伯語，那么“right”的位移屬性優先級高。
Position absolute
絕對定位元素也具有盒子位移屬性，然而，絕對定位元素會脫離文檔流。絕對定位元素直接從文檔流中移出，絕對定位元素的位置直接和父容器是否設置了相對定位（絕對定位）有直接關系。絕對定位元素需要至少一個祖先元素設置了相對定位（絕對定位），不然元素定位會相對於頁面的主體進行定位。
使用絕對定位的元素可以指定垂直和水平的位移屬性，使絕對定位元素相對於設置了相對定們的祖先元素邊緣進行移位。例如，一個絕對定位的元素設置了“top”值為“50px”和一個“right”值為“100px”,絕對定位元素會相對於其設置了相對定位的父元素的頂邊向下移動50px;向左移動100px。
然而，使用了絕對定位的元素並沒有進行任何盒子位移屬性設置，那么絕對定位元素的頂部和左部會和設置了相對定位的父元素的頂邊和左邊重合。如果設置了一個盒子位移屬性，比如說“top”，那么絕對定位元素垂直方向會進行移動，而水平位置默認還是左邊對齊。
在下面的演示中，你可以看到所有的盒子都相對於div的父元素進行絕對定位，每個元素都從特定的面使用定位值進行移動，而且使用了負值的，元素移動到盒子的外面。
HTML
<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
CSS
.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; }
效果
當一個絕對定位的元素有固定的高度和寬度，並且盒子位移同時設置了“top”和“bottom”時，“top”更具優先組，另外和相對定位元素一樣，當同時設置了“left”和“right”時，優先級取決於他的頁面使用的語言。
當一個絕對定位的元素沒有明確指定高度和寬度，同時使用盒子位移的“top”和“bottom”屬性時，會使整個元素的高度跨越整個容器。同樣的，當這個元素同時使用位移“left”和“right”屬性值，會使整個元素的寬度跨越整個容器。如果同時使用位移四個屬性，可以指定一個寬度和高度顯示元素。（這個時候絕對定位元素的寬度和高度都是100%。）
Position fixed
固定定位和絕對定位很類似，但是他定位是相對於瀏覽器窗口，並且不會隨滾動條進行滾動。也就是說，不管用戶停留在頁面那個地方，固定定位的元素將始終停留在頁面的一個地方。“position”屬性值中，僅有“fixed”屬性值不能在IE6瀏覽器下運行，如果你想在IE6正常使用固定定位，那么你就需要為他寫一些Hacks。
固定定位元素的盒子位移屬性的使用和絕對定位的一樣。
保持前面盒子移位，可以看到盒子固定定位是相對於瀏覽器窗口而不是設置了相對定位的父元素。
HTML
<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
CSS
.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; }
效果
固定頁頭和頁腳
固定定位最常見的一種用途就是在頁面中創建一個固定頭部、或者腳部、或者固定頁面的一個側面。就算是用戶移動瀏覽器的滾動條，還是固定在頁現與用戶交流。
下面的示例代碼能實現。注意如何設置“left”和“right”兩個盒子位移，這使得“頁腳”跨越了頁面的整個寬度，而不需使用margin、border和padding來破壞盒模形就做了收縮自如。
HTML
< footer >Fixed Footer </footer>
CSS
footer { bottom: 0; left: 0; position: fixed; right: 0; }
z-index屬性
通常都認為Web頁面是二維頁面，顯示的元素都在X軸和Y軸上。當你的元素有定位時，他們有時候會放置在另一個元素的頂部。要改變這些元素是一個 怎么樣的層疊順序，要知道z軸，z軸是用“z-index”屬性來控制的。
一般來說，在DOM中，元素出現的時候就放置在z軸上。在Dom中，元素在頂部的要低於底部的。改變這種層疊順序可以直接使用“z-index”來控制。元素的“z-index”值越高將會出現在越上面，不管元素在Dom哪個位置上。
給元素設置“z-index”屬性，首先要在這個元素上設置了“position”屬性值為“relatvie”、“absolute”或者“fixed”之一。同樣的，你要使用盒子位移屬性，你也要先確認元素設置了“positions”屬性值為“relative”、“absolute”或者“fixed”之一。
在下面的登例子中，如果每個盒子都不設置“z-index”，那么第一個box在第二個下面，第二個在第三個下面，第三個在第四個下面。如果在盒子中指定“z-index”的值，第二個盒子在第一個和第三個上面，第三個盒子在第四個上面。
HTML
<div class="box-set"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
CSS
.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; }
不設置z-index效果
設置z-index效果
擴展閱讀
- CSS的Float之一
- CSS的Float之二
- CSS Float Theory: Things You Should Know
- All About Floats
- Methods for Containing Floats
- CSS Floats 101
- Everything You Never Knew About CSS Floats
- SIMPLE TIPS ON CONTAINING FLOATS
- Clear Float
- Clearing floats nowadays
- CSS Hackz Series: Clearing Floats with the Clearfix Hack
- 十步圖解CSS的position
- A New Micro Clearfix Hack
- CSS Positioning 101
- On Having layout
- A Detailed Look at the z-index CSS Property
- The Z-Index CSS Property: A Comprehensive Look
譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！
如需轉載煩請注明出處：
英文原文：http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning
中文譯文：http://www.w3cplus.com/css/advanced-html-css-lesson2-detailed-css-positioning.html