浅谈css中的absolute和relative

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

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

定义4个div。

浅谈css中的absolute和relative
<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

浅谈css中的absolute和relative

 

 

 把第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;
    }

 

浅谈css中的absolute和relative

 

 

 

接下来在div3中加入一个div5

浅谈css中的absolute和relative
 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

浅谈css中的absolute和relative

 

 

 div4藏到了div3下面。

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

浅谈css中的absolute和relative

 

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

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

浅谈css中的absolute和relative

 

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

 

上一篇:CSS 三栏自适应布局


下一篇:微信小程序 位置定位position详解,相对定位relative,绝对定位absolute相关问题