• 文件流

HTML頁面的標準文件流(預設佈局)是：從上到下，從左到右，遇塊(塊級元素)換行。

• z-index屬性

  網頁雖然看起來是平面的二維結構，但其實是有z軸的，z軸的大小由z-index控制，預設情況下所有元素都在z-index：0這一層裡。
  設定position:relative或positive:absolute會讓元素浮起來，即z-index大於0，改變正常文件流。

float屬性

  給元素的float屬性賦值後，就是脫離文件流，進行左右浮動，緊貼著父元素的左右邊框。

1.左浮動的情況

2.右浮動的情況

position屬性

• absolute
  生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
  元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
• fixed
  生成絕對定位的元素，相對於瀏覽器視窗進行定位。
  元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
• relative
  生成相對定位的元素，相對於其正常位置進行定位。
  因此，”left:20” 會向元素的 LEFT 位置新增 20 畫素。
• static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
• inherit 規定應該從父元素繼承 position 屬性的值。

position屬性與float屬性的異同

- position
 
和float都會改變display的型別為inline-block，可以設定寬高，預設寬度不佔滿父元素。（relative不會）
- relative和absolute都會讓元素z-index屬性大於0，而float雖然也改變文件流，它仍然讓元素在z-index：0層排列。