1.相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- 相对于自己原来的位置偏移 -->
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px #666 dashed;
}
#p1{
background-color: rebeccapurple;
border: 1px #b42525 dashed;
position: relative;/*相对定位：上下左右*/
top: -20px;
left: 20px;
}
#p2{
background-color: aqua;
border: 1px red dashed;
}
#p3{
background-color: aquamarine;
border: 1px yellow dashed;
}
</style>
</head>
<body>
<div id="father">
<div id="p1">第一个盒子</div>
<div id="p2">第二个盒子</div>
<div id="p3">第三个盒子</div>
</div>
</body>
</html>
相对定位的属性是position：relative；
相对定位是相对于原来位置的偏移
top:-10px;
left:20px;
bottom:-10px;
right:20px;
定位的属性一共这四种情况。注意：偏移是相对于原来位置的，并不是left：20px；就表示向左偏移，而是向右偏移。
而且仍在标准文档流中，原来的位置会被保留，不会飘离。
相对定位的练习
<!DOCTYPE html
最低0.47元/天 解锁文章
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
