HTML之布局position理解

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，感兴趣的话，可以修改一下试试，找点感觉，这样会对理解有帮助。