大家好，今天给大家分享一下CSS的相对定位
看代码：
<!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 solid brown;
}
#first{
border: green 1px dashed;
}
#second {
border: lightsalmon 1px dashed;
}
#third{
border: green 1px dashed;
}
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三盒子</div>
</div>
</body>
</html>
效果：
<!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 solid brown;
padding: 0;
}
#first{
border: green 1px dashed;
background-color: brown;
}
#second {
border: lightsalmon 1px dashed;
background-color: yellow;
}
#third{
border: green 1px dashed;
background-color: darkorchid;
}
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三盒子</div>
</div>
</body>
</html>
看效果：
相对定位：
#first{
border: green 1px dashed;
background-color: brown;
**position: relative; /*相对定位*/
top:-20px;
left: 20px;**
}
看效果：
写源码：
#third{
border: green 1px dashed;
background-color: darkorchid;
position: relative;
bottom: 10px;
/*向下距离20px*/
right: 20px;
/* 向右平移20px*/
}
相对定位： position: relative;
就是要更改这个属性，相对于原先的位置，进行指定的偏移，相对定位的话，它依然在标准文档流当中，原来的位置会被保留
bottom: 10px;
/*向下距离20px*/
right: 20px;
/* 向右平移20px*/
好了，CSS的相对定位就到这里了，谢谢大家