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页面模块拖拽设计的一部分。需要的可以参考。

 <style type="text/css">
 #sub1,#sub2,#sub3{
     position : relative;
     height: 50px;
     margin: 10px;

 }
 #sub1p{
     border: 1px solid blue;
     margin: 20px;
     position:;
     top: 50px;
     left: 50px;
     right: 50px;
 }

 #parentLeft{
     border: 1px solid gray;
     width: 34%;
     position: relative;
     float: left;
     height:100%
 }
 #parentRight{
     border: 1px solid gray;
     width: 64%;
     position: relative;
     float: right;
     height: 100%;
     z-index: 1;
 }
 .ptop{
     position: absolute;
     width: 100%;
     top: 0px;
     height: 2px;
     border: 1px solid green;
     cursor: n-resize;
     z-index: 1;
 }
 .pleft{
     position: absolute;
     width: 2px;
     top: 0px;
     left: 0px;
     height: 100%;
     border: 1px solid green;
     cursor: e-resize;
     z-index: 1;
 }
 .pright{
     position: absolute;
     width: 2px;
     top: 0px;
     right: -2px;
     height: 100%;
     border: 1px solid green;
     cursor: e-resize;
     z-index: 1;
 }
 .pbottom{
     position: absolute;
     width: 100%;
     left: 0px;
     bottom: -2px;
     height: 2px;
     border: 1px solid green;
     cursor: n-resize;
     z-index: 1;
 }
 .pboth{
     position: absolute;
     width: 10px;
     right: -0px;
     bottom: -0px;
     height: 10px;
     border: 2px solid pink;
     cursor: nw-resize;
     z-index: 2;
 }
 </style>
 <div id="parentLeft">
     <div id="sub1p">sub1p
         <div id="sub1" style="border: 1px solid red;">
             <div class="ptop"></div>
             <div class="pleft"></div>
             <div class="pright"></div>
             <div class="pbottom"></div>
             <div class="pboth"></div>
             sub1
         </div>
         <div id="sub2" style="border: 1px solid red;">
             <div class="ptop"></div>
             <div class="pleft"></div>
             <div class="pright"></div>
             <div class="pbottom"></div>
             <div class="pboth"></div>
             sub2
         </div>
         <div id="sub3" style="border: 1px solid red;">
             <div class="ptop"></div>
             <div class="pleft"></div>
             <div class="pright"></div>
             <div class="pbottom"></div>
             <div class="pboth"></div>
             sub3
         </div>
     </div>
 </div>
 <div id="parentRight">

 </div>
 <script src="js/jquery-3.1.0.js"></script>
 <script type="text/javascript">
     $(document).ready(function(){
         var divs = $("div");
         $.each(divs, function(i, div){
             $(this).click(function(){
                 alert(this.id + ", " + $(this).css("position"));
             });
         });
     });
 </script>

这里，读者自己细心体会吧，例子中除了fixed没有用到，其他几个都有。fixed相对简单，使用的场景相对也简单，比如页面导航，或者页脚等。 例子中的position，感兴趣的话，可以修改一下试试，找点感觉，这样会对理解有帮助。