原始代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding: 20px;
}
div{
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father{
border: 1px solid red;
padding: 0;
}
#first{
background-color: sienna;
border: 1px dashed olivedrab;
}
#second{
background-color: sandybrown;
border: 1px dashed aqua;
}
#third{
background-color: lightcoral;
border: 1px dashed orange;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
相对定位:position:relative;
#first{
background-color: sienna;
border: 1px dashed olivedrab;
position: relative;
top: -20px;
}
总结:
相对于原来的位置,进行指定的偏移,相对定位的话,它仍然在标准文档流中,原来的位置会被保留
position: relative;
top: -20px;
left: 20px;
bottom: -10px;
right: 20px;