对于网页页面布局来说，使用定位进行布局十分的方便。

　　绝对定位（使用绝对定位应当将父元素设置为相对定位，否则元素绝对定位的基准会一直寻找外层非静态定位元素）：

            
                                 
     
        
      
       0-1
      
        
      
       0-2
      
    
     
    

　　结果如下：

0-1

0-2

　　如果不使用定位，要实现这样的效果，需要使用CSS属性为：

.box0{
     width: 200px; height: 200px;background: #cfa; overflow: hidden }.box0-1,.box0-2{
     width: 50px; height: 50px; }.box0-1{
     margin: 50px 0 0 50px;  }.box0-2{
     margin: 0 50px 0 100px; }

 

 　　使用边距和浮动是一个计算的过程，需要把握好每一个像素之间的关系。而使用绝对定位就是单纯的找位置，只要量得住，那就找的准，直接粗暴。需要注意的是，绝对定位的元素脱离了标准文档流，其本身的位置并不会保留，所以不能和浮动同时使用。并且也不建议和margin一起使用。

　　可以使用绝对定位将元素进行垂直方向的居中，需要配合CSS3的transform属性。

div {
     width: 100%;  height: 100px;  position: absolute;  top: 50%;  left: 0;  transform:  translateY(-50%);}

　　translateY函数是在元素Y方向上进行位移，使用百分比是是依照元素盒模型高度为100%的。这种定位可以用于元素高度不确定的情况，当然能使用弹性盒模型更加方便。

　　对于相对定位来说，由于元素本身的位置并不会消失，所以配合浮动更加好用，否则使用绝对定位更方便。

　　如下（便于观察，两个小块设置100的上外边距，此时原本位置应从下方3/4开始）：

            
                                 
     
        
      
       1-1
      
        
      
       1-2
      
    
     
    

　　结果如下：

1-1

1-2

　　相对定位的相对，就是指没有设置定位值，元素所在的位置，根据代码顺序，后者会对前者内容进行覆盖。

            
                                 
     
        
      
       我被固定了
      
    
     
    

　　结果自己找吧：

我被固定了

 　　结果不是根据父级元素定位的，显示不出（和上一篇的旋转一样）暂时不知道为什么。

　　总之，不同的定位方式有不同的作用，使用定位的目的是让代码简洁直观，所以具体使用哪一种应当根据实际情况而定。