相对定位 position: relative
相对于自身原来的位置进行指定的偏移
注意:该元素仍然在标准文档流中,原来的位置会被保留
语法
positive: relative;
top: 20px; /* 向下偏移20像素,和 bottom: -20px; 相同 */
bottom: 10px; /* 向上偏移10像素,和 top: -10px; 相同 */
left: -10px; /* 向左偏移10像素,和 right: 10px; 相同 */
right: 60px; /* 向左偏移60像素,和 left: -60px; 相同 */
/* 填写正数时,即向反向偏移对应的像素 */
/* 填写负数时,即向正向偏移对应的像素 */
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
border: 1px solid #000;
padding: 0;
}
#first {
border: 1px dashed #8400ff;
background-color: #840099;
}
#second {
border: 1px dashed #21bdf5;
background-color: #21bd99;
}
#third {
border: 1px dashed #ff7500;
background-color: #ff7599;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
#first {
/* 向上偏移15像素,向右偏移10像素 */
position: relative;
top: -15px;
left: 10px;
}
#third {
/* 向上偏移10像素,向左偏移5像素 */
position: relative;
bottom: 10px;
right: 5px;
}