1.静态定位static：按照标准流进行布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
width: 500px;
height: 200px;
border: 1px solid black;
}
.son{
/*
position
static:静态定位为position的默认值，表示盒子按照标准流进行布局
absolute:以父盒子为基准
relative:相当于太自己便宜
*/
position: static;
width: 200px;
height: 120px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="main">
<div class="son">静态定位</div>
</div>
</body>
</html>2.绝对定位absolute：以父结点为基准进行定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
width: 500px;
height: 200px;
border: 1px solid black;
}
.son{
/*
position
static:静态定位为position的默认值，表示盒子按照标准流进行布局
absolute:以父盒子为基准,进行定位
relative:相当于太自己便宜
*/
position: absolute;
width: 200px;
height: 120px;
border: 1px solid black;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div class="main">
<div class="son">绝对定位</div>
</div>
</body>
</html>3.相对定位relative：相对于原来的标准位置进行偏移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
border: 1px solid black;
}
.main{
width: 500px;
height: 200px;
border: 1px solid black;
}
.son{
/*
position
static:静态定位为position的默认值，表示盒子按照标准流进行布局
absolute:以父盒子为基准,进行定位
relative:相当于太自己便宜
*/
position: relative;
width: 200px;
height: 120px;
border: 1px solid black;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div class="main">
<div>普通盒子</div>
<div>1</div>
<div class="son">相对定位</div>
</div>
</body>
</html>此时将position换成absolute效果如下
对比一下绝对定位和相对定位
