HTML 學習 四種佈局方式absolute和fixed

absolute 和 fixed 的定位方式和static，relative 不一樣。absolute是根據父元素中第一個非static佈局的元素做爲定位依據的。
fixed則是相對於當前瀏覽器窗口的大小而定的。

默認的位置和static是同樣的。沒有任何位移。爲div1 設置margin和padding看，效果也沒有什麼不一樣。

absolute的魔力不在於此。absolute的特色是他是脫離文檔流的。也就是說，他不在文檔中佔用位置，可是他依靠文檔的父元素來肯定本身的位置。

div3是設置的對照，能夠看到div2並無對div3產生影響，也就是div3並無按照從上到下從左到右那樣排在div2的下面。div3徹底無視了div2的存在。這就是脫離文檔。

這裏爲div2 設置了top 和left 都是0，看到div2對齊了頁面的左上角。div2的父元素是div1，div1的父元素是document文檔，也就是咱們看到的頁面區域。因爲div1的position爲默認的，因此，不能當作div2的參照，所以div2只能再看看div1的父元素是否非static的。div1的父元素是document也就是body，也是static的，可是再往上也沒有元素了，因此只能以body做爲參照。向右移動0px，向下移動0px；

如今把div1改爲relative 再看。

div1 能夠做爲參照了，那麼div2的定位變成div1的左上角，向右移動0px，向下移動0px；

另外，對於absolute的元素來講，其left right bottom top 都是有效的。left表示，其相對於非static祖先元素，左邊框距離，right表示，二者右邊框距離。top，bottom同此。固然啦，這個時候是很差設置width和height屬性的。

 

absolute的特色就是這樣。

fixed 和 absolute 很相像，只是fixed的參照是瀏覽器可視區域的。當頁面發生滾動的時候，因爲瀏覽器的可視區域不變，所以fixed元素能夠一直浮動再頁面的固定位置上。