前端开发CSS的定位 postion元素:relative/absolute 的区别之终极揭秘

postion元素:relative/absolute：*

relative和absolute在css定位中是常用的属性。下面就来一探究竟relative和absolute的区别。以及在子父类情况下怎样用好定位？

初始的代码如下
html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位的几种用法</title>
    <link rel="stylesheet" href="./example1.css">
</head>
<body>
    <div class="wrapper">
    <div class="superfather">
       <span>我是爷爷</span> 
    <div class="father">
        <span>我是爷爷的儿子爸爸</span>
        <div class="son1">
            <span>我是爸爸的儿子1</span>
        </div>
        <div class="son2">
           <span>我是爸爸的儿子2</span> 
        </div>
    </div>
    </div>
    </div>
</body>
</html>

css代码

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;    
}
.wrapper{
    height: 700px;   
    width: 1900x;
   background-color: white;
   padding-top: 20px;
   
}
.father{
     height: 200px;   
     width: 400px;
    background-color: green;
    padding-top: 20px;
    
}
.son1{
    height: 100px;   
    width: 200px;
   background-color:red;
   
}
.superfather{
    height: 300px;   
    width: 500px;
   background-color:yellow;
   margin: 0 auto;
}
.son2{
    height: 100px;   
    width: 200px;
   background-color:gray;
   
}

效果图如下在这里插入图片描述

第一步：修改儿子1的position属性为absoute 加上left top 属性
效果图：在这里插入图片描述
发现此时儿子1是定位的基准点是浏览器的左上角

第二步：给爸爸加一个position属性 relative/absolute都可以在这里插入图片描述
此时，发现。子类的定位基准点变了，是他父类的左上角点！！！
我们把爸爸的position取消，给爷爷增加position试试会发生什么？
可以看到，儿子1在上一层父类没有postion属性的情况下，只要它的所有父类中有postion属性，它就会基于该父类的左上角进行定位！

第二步：relative和absolute的区别

relative是基于自身的定位
absolute是基于父类的定位（如果有父类的情况下），若没有仍相对于浏览器左上角点的定位。

1.当爸爸有position属性时，儿子1position属性为absolute 与往常一样，仍然是基于父类进行定位。
2当儿子1position属性为relative发现不是基于父类，而是基于自身所处的位置进行定位在这里插入图片描述

第三：为什么父类有relative子类用aboslute呢？
父类用relative是基于自身位置定位的，可以随便修改在浏览器中的位置。
而子类用abosulte是基于父类定位时，当父类改动位置时，子类会跟着改动。