春天，又是一个播种的季节
春天来了，万物复苏，放眼望去，生机勃勃！
春天一个播种的季节！
对于网页我们常常运用绝对定位和相对定位，
绝对定位和相对定位本就是我最薄弱的地方。在B站（很好的一个学习软件）上浏览了一个前端工程师的直播，真正意义上的可以说：我会了，今天写这篇文章，来和大家分享一下我的学习成果；里面的框架我就不说了，直接给大家呈现一下代码和运行结果。（根据网页和大家说一下绝对定位和相对定位）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/new_file.css" />
</head>
<body>
<div class="zhu">
<div class="zhu-top">
<img src="img/baidu.png" />
</div>
<div class="zhu-l">
<p>用科技<br /><span>让复杂的世界更简单</span></p>
</div>
<div class="zhu-b">
<a href="#">帮助中心</a>
<a href="#">|</a>
<a href="#">2021 ©Baidu</a>
</div>
<div class="form">
<h3>用户注册</h3>
<p>已有账号？<a href="#">登录</a></p>
<!-- <form>
用户名：<input type="text" name="用户名" /><br>
密码：<input type="password" name="密码"/>
<br />
<input type="submit" value="注册" />
</form> -->
<ul>
<li class="ma"><span>用户名：</span><input type="text" name="用户名"></li>
<li class="ma"><span>密码：</span><input type="password" name="密码"/></li>
</ul>
<div class="zhuce1">
<form>
<input class="zhuce" type="submit" value="注册" />
</form>
</div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
a{
text-decoration: none;
}
.zhu{
width: 980px;
height: 700px;
margin: 50px auto;
background: url(../img/594c79fe521c9.jpg);
position: relative;
}
.zhu-top{
position: absolute;
margin-top: 55px;
margin-left: 50px;
}
.zhu-l{
color: aliceblue;
position: absolute;
margin-top: 400px;
margin-left: 200px;
}
.zhu-l p{
font-size: 30px;
}
.zhu-l span{
font-size: 18px;
}
.zhu-b{
position: absolute;
margin-top: 650px;
margin-left: 60px;
}
.zhu-b a{
color: cornsilk;
}
.zhu-b a:hover{
color: chartreuse;
}
.form{
width: 250px;
height: 200px;
position: absolute;
margin-left: 700px;
margin-top: 100px;
border: #7FFF00 1px solid;
}
.form h3{
text-align: center;
}
.form p{
text-align: center;
}
.form ul{
width: 230px;
height: 100px;
}
.form .ma{
width: 230px;
height: 50px;
text-align: right;
line-height: 50px;
}
/* .zhuce{
width: 50px;
height: 30px;
} */
.form span{
color: #ccc;
}
.zhuce1{
width: 250px;
height: 50px;
}
.zhuce1 .zhuce{
width: 50px;
height: 50px;
margin-left: 100px;
background-color: red;
color: aliceblue;
}
我们首先在body里面写了一个div（类名：zhu）然后在zhu这个div里面嵌套了四个div（分别为：类名：zhu-top，类名：zhu-l，类名：zhu-b，类名：form）
那么我们看到这个嵌套就知道他们之间的父子级关系，类名zhu嵌套他们，我们就知道zhu是父亲，嵌套内的div就是孩子了，我们搞懂父子级关系就可以运用绝对定位和相对定位，来实现块div的移动。
我们先认识一下绝对定位和相对定位的样式代码
position: absolute;绝对定位
position: relative;相对定位
（对于他们两个的知识点，我放到了最后）
我们在父级div里面给上相对定位：position: relative;
我们在子级div里面给上绝对定位：position: absolute;
我们看css样式：（父级）
.zhu{
width: 980px;/* 宽 */
height: 700px;/* 高 */
margin: 50px auto;/* 居中 */
background: url(../img/594c79fe521c9.jpg);/* 背景图片 */
position: relative;/* 相对定位 */
}
通过设置绝对定位和相对定位，我们可以以父级div为定位设置边距来实现子级div的移动，来实现最后的效果。
长按二维码关注我
