HTML中的布局，一个比较难以理解的概念，就是position了，W3C上的解释，position有如下几种：
1. static，默认值，也就是在样式中不指定position
2. fixed
3. absolute
4. relative
其中，static，fixed的相对好理解点，比较难一点的是absolute及relative。 我个人的理解，这里的position，都是要找一个参照层再来说位置的布局。没有参照层，布局其实就没有什么意义，至少生产环境下是这样子的，因为你放置一个HTML元素的时候，一定在设计的时候是有一个期望的，那就是你希望这个元素放在父层中的什么位置。也就是说你不会瞎放，若是想瞎放，那就不在这个话题范围内了！
其实，这个要是有切身的体会，还是不那么难理解的，若没有实际操作过，估计是比较难以搞明白。尤其absolute和relative。 还有，这position中，static下，top，left，bottom， right等属性将无效。 relative和absolute，通常要和top/left/bottom/right一起使用，他们也往往与margin一起实现布局中的位置调整。
理解上的东西，最好来个例子，会有助于接受概念上的东西。 下面的例子，是用来做web页面模块拖拽设计的一部分。需要的可以参考。
1 <style type="text/css"> 2 #sub1,#sub2,#sub3{ 3 position : relative; 4 height: 50px; 5 margin: 10px; 6 7 } 8 #sub1p{ 9 border: 1px solid blue; 10 margin: 20px; 11 position:; 12 top: 50px; 13 left: 50px; 14 right: 50px; 15 } 16 17 #parentLeft{ 18 border: 1px solid gray; 19 width: 34%; 20 position: relative; 21 float: left; 22 height:100% 23 } 24 #parentRight{ 25 border: 1px solid gray; 26 width: 64%; 27 position: relative; 28 float: right; 29 height: 100%; 30 z-index: 1; 31 } 32 .ptop{ 33 position: absolute; 34 width: 100%; 35 top: 0px; 36 height: 2px; 37 border: 1px solid green; 38 cursor: n-resize; 39 z-index: 1; 40 } 41 .pleft{ 42 position: absolute; 43 width: 2px; 44 top: 0px; 45 left: 0px; 46 height: 100%; 47 border: 1px solid green; 48 cursor: e-resize; 49 z-index: 1; 50 } 51 .pright{ 52 position: absolute; 53 width: 2px; 54 top: 0px; 55 right: -2px; 56 height: 100%; 57 border: 1px solid green; 58 cursor: e-resize; 59 z-index: 1; 60 } 61 .pbottom{ 62 position: absolute; 63 width: 100%; 64 left: 0px; 65 bottom: -2px; 66 height: 2px; 67 border: 1px solid green; 68 cursor: n-resize; 69 z-index: 1; 70 } 71 .pboth{ 72 position: absolute; 73 width: 10px; 74 right: -0px; 75 bottom: -0px; 76 height: 10px; 77 border: 2px solid pink; 78 cursor: nw-resize; 79 z-index: 2; 80 } 81 </style> 82 <div id="parentLeft"> 83 <div id="sub1p">sub1p 84 <div id="sub1" style="border: 1px solid red;"> 85 <div class="ptop"></div> 86 <div class="pleft"></div> 87 <div class="pright"></div> 88 <div class="pbottom"></div> 89 <div class="pboth"></div> 90 sub1 91 </div> 92 <div id="sub2" style="border: 1px solid red;"> 93 <div class="ptop"></div> 94 <div class="pleft"></div> 95 <div class="pright"></div> 96 <div class="pbottom"></div> 97 <div class="pboth"></div> 98 sub2 99 </div> 100 <div id="sub3" style="border: 1px solid red;"> 101 <div class="ptop"></div> 102 <div class="pleft"></div> 103 <div class="pright"></div> 104 <div class="pbottom"></div> 105 <div class="pboth"></div> 106 sub3 107 </div> 108 </div> 109 </div> 110 <div id="parentRight"> 111 112 </div> 113 <script src="js/jquery-3.1.0.js"></script> 114 <script type="text/javascript"> 115 $(document).ready(function(){ 116 var divs = $("div"); 117 $.each(divs, function(i, div){ 118 $(this).click(function(){ 119 alert(this.id + ", " + $(this).css("position")); 120 }); 121 }); 122 }); 123 </script>
这里，读者自己细心体会吧，例子中除了fixed没有用到，其他几个都有。fixed相对简单，使用的场景相对也简单，比如页面导航，或者页脚等。 例子中的position，感兴趣的话，可以修改一下试试，找点感觉，这样会对理解有帮助。