css中定位的认识与了解

一、绝对定位元素top,left,right,bottom四个属性的理解：
由于几个属性类似，所以就以left为例。
在W3Cschool上是这么解释的：该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
为方便理解，直接上代码：
css代码：

.parent{
    position: relative;
    width:400px;
    height:400px;
    border:20px solid #57D1CD;
    background-color: #709F59;
}
.child{
    position: absolute;
    left:0;
    width:50px;
    height:50px;
    margin-left:50px;
    background-color: #3356B9;
}

HTML代码：

<div class="parent">
    <div class="child"></div>
</div>

那么问题就来了：

1. 什么是“左外边距边界”？
   就是margin-left（左边距）的左边界。

2. 什么是“包含块左边界”？
   在这里的包含块指的是离child元素最近的有定位属性的祖先元素，而不一定是其父元素。
   那包含块的边界呢？
   就是边框的内边界，也就是边框与padding的交界处。

为了更好理解，上图：
说明：以下元素都是标准盒模型！
为了直观，把child的left设为0：
当child的margin-left：50px时
当child的margin-left：-50px时
说明什么呢？也就是我们视觉上child的偏移量是（left值+margin-left值）；请注意是视觉上，而不是实际的和客观的。虽然我们在布局时就是要看“视觉上”的结果，但是还是要弄清楚实际的情况。
那么对于top来说呢？top不是在一些情况下会发生传递吗？由于此时child已经有了绝对定位属性，所以就不会发生传递了。

1. left的默认值：auto；是什么意思？
   auto不一定代表0；不设置left或者将其设置为auto，那left就对该元素不起作用（个人理解），也就是在水平方向上该元素该在哪里就还是在哪里，不会起什么位置上的变化。

2. left的百分比值：
   left的百分比值是相对于他的包含块的（content宽+左右padding）而言的，与边框没有关系。就这一点，无论是标准盒模型还是border-box都是一样的。
   将上述的child设置为left：30%；margin-left:0；parent的padding：50px;那最终的左偏移量为（width400+2padding50）30%=150px。

3. ie7关于z-index的一个有趣现象：
   css代码：

               .parent{
           position: relative;
           width:400px;
           height:400px;
           padding:50px;
           border:20px solid #57D1CD;
           background-color: #709F59;
       }
       .child{
           position: absolute;
           left:30%;
           z-index: 2;
           width:50px;
           height:50px;
           margin-top:50px;
           background-color: #3356B9;
       }
       .b{
           position: absolute;
           top:50px;
           z-index: 1;
           width:300px;
           height:200px;
           background-color: #CAA842;
       }

   html代码：

   <div class="parent">
   <div class="child"></div>
   </div>
   <div class="b"></div>
   在标准浏览器上，显示的结果都是child覆盖在b的上面，因为child的z-index大于b的z-index。也就是下图的结果：
   而在ie7下却是这种结果：
   怎么解决呢？如果要兼容ie7的话，就必须让parent的z-index高于b。