在HTML中，有三種機制：文檔流（默認(rèn)） 浮動 定位。

文檔流：默認(rèn)機制，按照從上到下，從左到右的順序排列，這是最基礎(chǔ)的。

浮動：float:left|right;clear:both? ，脫離文檔流，可以想象成子DIV 漂浮起來了，比如，一個父div，有兩個子div，如果是在文檔流中，兩個子div是將父div分成上下兩部分的，就像是“日”字；但是如果子div1 設(shè)置了float屬性，那么子div2 就會往上移動，就會變成三個“口”字重疊在一起，最下面的那個口是父div，上一層是子div2，最上面是子div1 。

定位：position:absolute| relative|fixed? .

其中，absolute是絕對定位，脫離了文檔流。根據(jù)設(shè)置了定位屬性的父元素的左上角為基點，通過top right? bottom left來定位。如果父元素沒有設(shè)置定位屬性，那么以body的左上角為基點。比如三個div，id=one是父元素，兩個子元素的id分別是two three? 。設(shè)置one的position屬性（absolute relative都可），設(shè)置two的position：absolute；left:10px; top:10px; three不設(shè)置position屬性。那么情形和上面的float的三個“口”字重疊一樣，底層是one，次一層是three，最上面是two，但是最上面的會向右和向下移動10px。

relative是相對定位，沒有脫離文檔流，不可疊加。還是上面的例子，三個div ，one two three。如果之設(shè)置two的position：relative；left:10px;top:10px;? 那么結(jié)果就會是這樣的：想象一個“日”字，上面的是two，下面的是three。雖然two向右 向下移動了10px，但是three依然不會占上去，依然在文檔流中的原來位置。