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是基于父类定位时,当父类改动位置时,子类会跟着改动。