關於CSS中的float和position和z-index

當構建頁面排版時，有不一樣的方法可使用。使用哪種方法取決於具體頁面的排版要求，在不一樣的狀況下，某些方法可能好過於其餘的方法。

好比，可使用若干個浮動元素來構建一個整潔簡潔的頁面排版。或者，若是須要更復雜的排版要求，能夠考略使用其餘方法，好比使用相對定位和絕對定位。

在這篇文章中，咱們首先要討論元素浮動；而後，咱們要討論如何使用x,y和z軸控制元素的位置。

元素浮動

當構建一個頁面的排版時，使用元素浮動是一種直觀的方法去控制元素的位置。元素浮動可讓一個元素靠近或者遠離另外一個元素。它根據一個元素的大小和其父節點容器的大小來構造這個元素在排版中與其餘元素之間的關係。

當一個元素被浮動時，這個元素是挨着前一個元素，仍是出如今新的一行？這取決於它相鄰元素的位置。

固然，元素浮動在提供強大威力的同時，也帶來了不少問題。一個著名的問題就是，當一個父節點包括了若干浮動的子元素時，父節點的排版會考慮到浮動子元素的大小和位置，可是子元素並不會影響父節點的大小。在這種狀況下，父節點的height變成了0，而且忽略其餘屬性。不少時候，這個問題沒有被注意到，特別是當父節點沒有附合任何的CSS樣式，並且嵌套的元素也看上去被正確地排列了。

若是沒有正確地排列嵌套元素，那麼可能引起排版上的錯誤。請參閱下面的這個例子，類名爲.box-set的DIV容器應該有淺灰色的背景，可是由於其嵌套元素都是浮動元素，因此本來指望的背景色沒有出現。若是你查看.box-set的盒模型，你會發現它的height值爲0。

<style>
.box-set {
    background: #e8eae9;
}
.box {
    background: #8ec63f;
    height: 100px;
    float: left;
    margin: 10px;
    width: 200px;
}
</style>
<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

一個解決方法是在父容器閉合標籤前加上一個空元素，而且設置它的clear:both。「清除浮動元素」這一招能夠解決大多數狀況，可是它並非「語義正確」的。隨着頁面上須要清除的浮動元素的數量增長，須要的空節點的數量也隨之增長，可是這些空節點並無任何的HTML語義。

幸運的是，有一些其餘技巧一樣使用，最著名的就是使用overflow和clearfix的技巧。

使用overflow

在父容器上設置overflow:auto可讓它自動包含子元素，從而具備了實際的height值，這樣上例中的灰色背景將獲得顯示。

在IE6中使用這一招時須要給父節點容器設置height或者width屬性。由於實際狀況中height經常是可變的，因此是設置width的值。對於蘋果平臺上的IE，設置overflow:auto將會給容器增長滾動條，因此最好是設置overflow:hidden。

.box-set {
    background: #404853;
    overflow: auto;
}

這一招有些反作用。例如，須要增長樣式或者移動子元素超出了父容器的範圍時，好比實現邊框陰影或者加上一個下拉菜單。在下面的例子中你將看到，當邊框陰影超出父容器的範圍時就會被遮蓋了，同時第二個子元素排列有問題。

使用clearfix

clearfix一般搭配:before或者:after僞元素使用。使用僞元素就是在包含浮動元素的父容器的前面或者後面創造一個隱藏的元素。經過對:before僞元素使用display:table來建立一個匿名的table-cell元素，從而防止子元素的top margin消失。這一招在IE6和7中具備一致的效果。一樣的，經過設置:after僞元素來防止子元素的bottom margin消失。

另外，須要對父容器使用*zoom屬性觸發hasLayout機制來解決IE6和7的一致性。hasLayout機制決定了元素應該怎樣渲染和框住它的內容，以及元素間的位置關係。

在下面使用clearfix的例子中，你將看到元素就算超出了父容器也能夠顯示了。（注意邊框陰影）

.box-set:before, .box-set:after {
    content: "";
    display: table;
}
.box-set:after {
    clear: both;
}
.box-set {
 *zoom: 1;
}

有效地包含浮動元素

具體使用哪個技巧取決於你的我的習慣。有些人傾向於使用clearfix技巧，由於它在跨瀏覽器上的一致性更好。另外一些人以爲clearfix須要更多的代碼。所以，選擇哪一個技巧不重要，重要的是註釋註明和寫進文檔。

一個常見的實現就是給全部須要包含浮動元素的父容器一個統一的類名，方便管理樣式。好比使用下列代碼，這樣只需給須要包含浮動元素的父節點加上group的類名便可。

.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
 *zoom: 1;
}

Position屬性

有些狀況下，你須要更多的對元素位置的控制，這時候就須要使用position屬性了。position屬性一共有五種不一樣的取值。

 

Position Static

這是position屬性的默認取值，意味着這個元素沒有也不接受任何對於該元素的位置偏移量屬性。

在下列的例子中，全部的盒子都將一個接一個的堆起來。由於它們都是塊級元素，而且沒有被浮動。

<style>
.box-set {
    background: #e8eae9;
}
.box {
    background: #8ec63f;
    height: 80px;
    width: 80px;
}
</style>
<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

Position Relative

relative定位很是相識於static定位。最大的區別就是相對定位的元素可使用偏移量：top, right, bottom, left。這四個偏移量可讓元素朝任何方向移動，從而精確的控制顯示出來的位置。

注意，儘管相對定位的元素可使用偏移量屬性，可是它在網頁排版時按照的倒是跟static position相同的方式（這點區別於fixed position和absolute position）。另外，相對定位的元素能夠覆蓋其它元素，或者被其它元素覆蓋，儘管它自身並無偏移。

在下列的例子中，全部的盒子都是一個接一個的堆起來。可是他們按照各自被定義的offset相對於本來的位置作了改變。因此，有些盒子覆蓋了其餘的盒子，而不是推開其餘盒子。若是一個元素是相對定位（甚至它還作了偏移），它周圍的元素在排版時參考的依然是那個元素本來的位置（指在沒有偏移時的位置）。

<style>
.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;
}
</style>
<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

若是同時聲明top和bottom的值，那麼top值的優先級更高。若是同時聲明left和right的值，那麼優先級取決於網頁的語言（例如，英語法語德語西班牙語）。好比，在英語的網頁中，left的優先級更高；在阿拉伯語的網頁中，right的優先級更高。

 

Position Absolute

絕對定位的元素接受偏移量。在排版中，絕對定位的元素從原來的位置上被抹去了（所以它後面的元素將佔領它目前的位置），而後根據它的相對定位的父節點的位置定位。若是它沒有相對定位的父節點，那麼元素直接參考body容器定位。

對絕對定位的元素使用偏移量屬性，這個元素將以相對定位的父節點做爲參考系進行偏移。

若是沒有對絕對定位的元素使用偏移量屬性，那麼該元素將被放置在父節點的左上角。若是隻設置了top屬性，那麼該元素則只作垂直方向的偏移，而水平方向依然靠着父節點的最左邊。

在下面的例子中，全部的盒子相對於父容器做了絕對定位。若是偏移量是正數，那麼盒子被「往裏推」了；若是偏移量是負數，那麼盒子被「往外拉」了。

<style>
.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;
}
</style>
<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

若是絕對定位的元素有固定的height和width值：

若是同時聲明top和bottom的值，那麼top值的優先級更高。若是同時聲明left和right的值，那麼優先級取決於網頁的語言（例如，英語法語德語西班牙語）。好比，在英語的網頁中，left的優先級更高；在阿拉伯語的網頁中，right的優先級更高。

若是絕對定位的元素沒有固定的height或者width值：

若是元素並無固定height值，但是卻同時有top和bottom的值，那麼該元素將橫跨除了top和bottom以外剩下的全部高度。同理，若是元素並無固定width值，但是同時有left和right的值，那麼該元素將橫跨除了left和right以外剩下的全部寬度。若是元素既沒有固定height和width值，卻同時有top, bottom, left, right值，那麼該元素將佔據除了四條邊距離以外的全部空間。

 

Position Fixed

固定定位的元素跟絕對定位的元素很類似，只不過它參照的座標系是瀏覽器的視口(viewport)。固定定位的元素不隨着頁面滾動而移動，它會始終保持在那個位置。另外，在IE6中使用固定定位有一個BUG，須要使用一些hack來解決。

一個典型的使用固定定位的例子是網頁中的頂部橫條或者底部橫條。當用戶滾動頁面時，那個橫條始終停留在瀏覽器視口的頂部或者底部。

<style>
footer {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
}
</style>
<footer>Fixed Footer</footer>

z-index屬性

網頁是一個二維空間，根據x軸和y軸展現各個元素。但是，若是你須要讓某個元素放置在其餘元素的上面（可在默認的排版中，她並非在他的上面），這時你能夠改變她的z-index屬性，讓她跑到他的上面。

元素在z軸的位置的位置取決於它在DOM中出現的前後順序。若是兩個元素髮生重疊，先在DOM中出現的元素一般排在後出現元素的下面。改變先出現元素的z-index屬性是一個簡單的方法讓他出如今更上面。擁有最高z-index屬性的元素永遠被排在最上面，與它在DOM樹中的位置無關。

若是你須要設置一個元素的z-index屬性，你必須首先設置這個元素是relative，absolute或者fixed定位。就像對於設置top, bottom, left, right屬性同樣。

<style>
.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;
}
</style>
<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>