浅谈css中的absolute和relative

position:absolute和position:relative是两个html中常用到的样式，前者是绝对定位，定位基于最近的一个已经定位的祖先元素，如果没有找到，就基于根元素<html>进行定位，后者是相对定位，基于自身的位置进行偏移。

下面用几个简单的例子看看。

定义4个div。

<style>
    div {
        height:100px;
        border:1px solid #999;
    }
    #div1{
        background-color:yellow;
    }
    #div2{
        background-color:orange;
    }
    #div3 {
        background-color:skyblue;
    }
    #div4 {
        background-color:lightgray;
    }
    
</style>
<body>
        <div id="div1">第一个div</div>
        <div id="div2">第二个div</div>
        <div id="div3">第三个div</div>
        <div id="div4">第四个div</div>
</body>

View Code