對position錯誤的理解
每次做層浮動效果時，我都將position設置為absolute, 再通過js來計算left,top來給元素來定位。也許是之前做的頁面非常簡單，整個頁面里面沒有嵌套設置position的情況，故一直都認為當position：absolute時，是相對於document.body來偏移的， 其實並不是這樣的， 我們先看下position的屬性。
position的屬性
static
relative
absolute
fixed
對每個屬性的理解
static: 這是默認值，即按照正常的文檔流的順序來放元素。 這個時候你設置left,top是沒有效果的。
relative: 位置會以元素本身的位置進行偏移，即你設置了left,top ,他會以此元素原來的位置做為坐標偏移。
absolute: 位置會從父元素開始查找，如果父元素的position不是 static的,那么他就以這個父元素的位置進行偏移，否則就會一直向上查找，直至查找到body,就以body的位置偏移，所以以前理解absolute是以body為位置偏移是錯的，那是因為你處理的元素的父元素的position都是默認static的, 但當你的父元素是非static的，算位置時就出現不一樣的效果。
fixed: 這個才是以document.body的位置偏移的， 無論你要設置的元素的父元素或往上的元素的position是absolute,relative,fixed， 他都是以document.body的位置偏移的。
這樣理解后，就消除了以前的一些疑惑。 但在定位方面，我們可以試一下更復雜的情況。
可以進一步理解
在實際position定位時會遇到很多種情況，比如父元素設置了margin,padding,border. 那么定位原則是怎樣的呢？
1. 當元素的position:relative時，位置偏移時是從此元素自身的margin的最左上側開始算的。
2. 當元素的position:absolute時 這里也分兩種情況：
（1） 無論它的父元素是怎樣的，如果它自身有margin ,那么他的位置偏移也是要算上它自身的margin的。
（2） 如果它的父元素不是默認的static ,而它父元素有border 和 padding, margin.
則它的位置偏移要算上父元素的margin和border,當時不會算上padding.
可能上面說的比較有點亂，不太好理解，在這里上個例子，大家也可以改這個例子來看看效果，例子僅僅只是測試位置，命名和文字請不要太在意。
<!DOCTYPE> <html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style> div { border:1px solid red; } .ap { position:relative; border:30px solid red; margin:200px; padding:20px; left:20px; top:20px; width:400px; height:400px; } .a { border:1px solid blue; position:absolute; margin:100px; left:0px; top:0px; } </style> </head> <body> <div> fdsfdsds <div> qq <div class="ap"> fffdfdfd<br> 7777 <div class="a">kkkk</div> </div> </div> </div> <script> </script> </body> </html>
總結
現在終於基本上對position的定位有一定的了解了，也希望可以幫助到大家，如果有什么問題請給我留言，大家一起進步。 另外，對於position還會結合到通過js操作dom元素的
offsetWidth,offsetLeft, offsetParent等等屬性，下一期我會繼續討論這方面的問題，希望大家一起將這些吃透。