绝对定位不占任何位置的定位(带有绝对定位的div盒子直接不保留之前的位置移动)
相对定位占位置的定位(举例:虽然带有相对定位的div模块移动了,但是这个div之前的占的位置还在的)
绝对定位的div盒子的父亲必须要有一个定位,不然绝对定位就直接以浏览器为基准开始走动
举个例子
没给最外面的DIV定位,给最里面DIV一个绝对定位,发现这个小DIV是沿着浏览器边缘走动的
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.diva {
width: 500px;
height:500px;
background-color:red;
margin-left:40px;
}
.divb {
width: 300px;
height:300px;
background-color:#ccc;
position: absolute;
left: 20px;
}
</style>
</head>
<body>
<div class="diva">
<div class="divb"></div>
</div>
</body>
</html>
如果我跟父亲给个相对定位了,效果看下图
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.diva {
width: 500px;
height:500px;
background-color:red;
margin-left:40px;
position: relative;
}
.divb {
width: 300px;
height:300px;
background-color:#ccc;
position: absolute;
left: 20px;
}
</style>
</head>
<body>
<div class="diva">
<div class="divb"></div>
</div>
</body>
</html>
position: absolute;绝对定位
position: relative;相对定位