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>

那么问题就来了：

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

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

left的默认值：auto；是什么意思？
auto不一定代表0；不设置left或者将其设置为auto，那left就对该元素不起作用（个人理解），也就是在水平方向上该元素该在哪里就还是在哪里，不会起什么位置上的变化。
left的百分比值：
left的百分比值是相对于他的包含块的（content宽+左右padding）而言的，与边框没有关系。就这一点，无论是标准盒模型还是border-box都是一样的。
将上述的child设置为left：30%；margin-left:0；parent的padding：50px;那最终的左偏移量为（width400+2padding50）30%=150px。

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。