position:relative与position:absolute的一个技巧

首先来看以下，一个father div, 一个son div

.father{
    border:1px solid red;
    width:100px;
    height:100px;
    margin:50px;

}
.son{
    border:1px solid yellow;
    margin:5px;
}

html代码：

<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>

浏览器中的效果：

给son div,添加position，如下：

.father{
    border:1px solid red;
    width:100px;
    height:100px;
    margin:50px;

}
.son{
    border:1px solid yellow;
    margin:5px;

    /*增加以下代码*/
    position:absolute;
    top:0;
    left:0;
}

由于添加了  position:absolute; 现在son div的top,left是相对于body元素，而不是相对于father元素

浏览器效果如下:

 

为father div添加  position:relative;

.father{
    border:1px solid red;
    width:100px;
    height:100px;
    margin:50px;

    /*增加以下代码*/
    position:relative;
}
.son{
    border:1px solid yellow;
    margin:5px;

    /*增加以下代码*/
    position:absolute;
    top:0;
    left:0;
}

则此时的son 的positon相对于father div 的定位 

 

结论:如果position属性值是absolute的元素放入一个position属性值是relative的元素

       则后者成了前者的容器。

也即是说，position为absolute的元素不会去相对于body定位而是相对于当前容器



 

posted @ 2012-02-14 17:07  猪弟  阅读(214)  评论(0)    收藏  举报