浅谈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

把第3个div设置成absolute,但是不设置left和top值。可以发现:

1.div3宽度由元素中的内容决定了

2.div4上移到第三个div的位置，被第3个div所覆盖了

3.div3在设置绝对定位以后，并没有基于<html>根元素偏移。

总结下我的个人理解:

1.设置了absolute的元素宽度是由内容决定的，relative元素的宽度的则是取决于父元素的宽度

2.如果设置了absolute属性，元素会让出原来的位置，处于另外一个层级。

3.在没有设置left,top等值的时候，虽然div已经有了absolute元素的特性，但是还会保持在之前的位置，尽管已经处在不同的层级，这时候如果我们设置left和top都为0，就会基于最近的定位了的父元素进行偏移，在这个例子中，div3就会偏移到左上角的位置。

#div3 {
        background-color:skyblue;
        position:absolute;
    }

接下来在div3中加入一个div5

 1 <style>
 2     div {
 3         height:100px;
 4         width:200px;
 5         border:1px solid #999;
 6     }
 7     #div1{
 8         background-color:yellow;
 9     }
10     #div2{
11         background-color:orange;
12     }
13     #div3 {
14         background-color:skyblue;
15         position:absolute;
16     }
17     #div4 {
18         background-color:lightgray;
19     }
20     #div5 {
21         width:100px;
22         height:50px;
23         background-color:red;
24         
25     }
26     
27 </style>
28 <body>
29         <div id="div1">第一个div</div>
30         <div id="div2">第二个div</div>
31         <div id="div3">
32             第三个div
33             <div id="div5">
34                 第五个div
35             </div>
36         </div>
37         <div id="div4">第四个div</div>
38 </body>

View Code

div4藏到了div3下面。

给div5设置absolute属性，添加left:50px,top:0px;

如果设置relative,top:0px,left:50px;

    #div5 {
        100px;
        height:50px;
        background-color:red;
        position:relative;
        left:50px;
        top:0px;
    }

以上就是我对relative和absolute的一些简单总结了。