css中的position、z-index、clearfix

<span style="font-family: 'Times New Roman'; background-color: rgb(255, 255, 255);"></span>

在css中調樣式是再常見不過了，不過今天要說的position、z-index、clearfix和clear是非常需要注意的。

position

平時直接使用html元素的時候，可以不顯式的使用它，但是事實上瀏覽器會給它設置默認值position:static。position的取值共有4種：static、relative、absolute、fixed。

• static
  就是遵循基本文檔流，即從左到右，從上至下。塊級元素默認佔一行（可以使用inline-block或者display：table-cell使其變成行級元素），當一個元素在某行放不下時，會自動移至下一行。
  

• relative
  

  也遵循基本文檔流，但是它可以設置top、left、right、bottom四個屬性來設置元素的位置，並且這四個屬性是相對於當前元素自身在文檔流中的位置來說的。例如:position:relative;top:-5px;left:30px.這樣其實是將元素相對於自身上移了5px，右移了30px。
  

• absolute
  

  脫離基本文檔流，它也有top、left、right、bottom四個屬性，但是是相對於最近一個position屬性值不是static的元素來說的。因爲脫離了基本文檔流因此它不會佔用文檔流空間。
  

• fixed
  

  脫離了基本文檔流，它也有top、left、right、bottom四個屬性，但是這四個屬性是相對於屏幕來說的，因此，一般在需要使一個元素始終保持在屏幕的某個位置即使拖動滾動條也不變的話就需要使用它。例如，在右鍵菜單的場景中，我們是需要使用它的。
  

z-index

z-index顧名思義，其實就是我們數學上說的z軸的位置，它代表的就是當前的元素面板在垂直於屏幕的z軸上的值，如果該值越大，則該層優先級越靠前，這樣就會覆蓋優先級比它低的其他元素面板。
    ​z-index的意思很好懂，但是需要注意一點，使用它的時候必須要同時使用position屬性纔行，不然，無論怎麼設置z-index都沒有用。

clearfix

clearfix是一個class，但是這個類是需要自己定義的，但是在bootstrap中已經提供了這個類，它的css代碼如下：

clearfix:before{
    ​content:"";
    ​display:table;
}
clearfix:after{
    ​clear:both;
}

主要是clear:both這句的作用，它其實就是清除浮動。需要注意的是該類需要在浮動元素的父節點上使用才能發揮作用，原因也是很明顯，如果直接在浮動節點上使用，它只是通過僞類clearfix:after在浮動節點內部的末尾增加了一個空塊級元素，並且該塊級元素擁有clear：both屬性，使其清除了自身的對浮動的可見性（個人理解，如果一個元素設置了float，不佔用文檔流空間，因此後一個非浮動元素會佔用該位置，並且其中的文字會在float元素周邊出現，clear：left或者clear:right或者clear:both其實只是屏蔽了當前元素對左右兩邊浮動元素的可見性，會把他們當做非浮動元素來對待，然後判斷自己的文檔流位置）

總結

html雖然簡單但是要對每個問題弄清楚還是需要時間和下功夫。