CSS布局模型 之 層模型（position的relative、absolute與fixed差別？）

  css的布局模型分為流動模型（Flow）、浮動模型（Float）、層模型（Layer）。

  浮動模型（Float）和層模型（Layer）有什麼顯著差別？

  層模型（Layer）：設定為層模型的元素已從文檔流删除，在文檔流上層一層層覆寫，寫在後面的層模型元素會覆寫前面層模型元素，層模型元素的定位與文檔流無關，隻基于帶有定位屬性（relative、absolute）的元素或視窗；

    position的relative、absolute與fixed差別？

  這三個定位屬性是屬于層模型的三種展現形式，另外任何元素都可以定位，不過絕對定位或固定定位元素會生成一個塊級框（有塊級元素特性，但不占整行），而不論該元素本身是什麼類型。

  使用差別  

  relative 相對定位，以自己目前處于文檔流的位置為基準設定偏移量，是以自身在文檔流會保持占有固定的實體空間，并且實體空間的位置隻受文檔流的影響，而不受自身設定偏移量（top/left這些）影響，注意自身設定了margin這類非定位屬性也一樣改變其在文檔流的實體位置。

  absolute 絕對定位，是相對于設定了position為relative或者absolute最近的父級元素定位（body、html标簽也需要定位屬性才能作為定位父級），如果沒有就是基于視窗定位，不占文檔流的實體空間。

  fixed 固定定位，是相對于浏覽器視窗的，不占文檔流的實體空間。

本文轉自 藝晨光 51CTO部落格，原文連結：http://blog.51cto.com/ycgit/1958756，如需轉載請自行聯系原作者