相对定位它是相对于“原来的自己”来进行定位！语法:position:relative;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 600px;
border: 1px solid #76EEC6;
margin: 100px auto;
}
.box div{
width: 100px;
height: 100px;
}
.box .div1{
background-color: #f00;
}
.box .div2{
background-color: #0f0;
position: relative;/*相对定位属性*/
left: 100px;
top: 100px;
}
.box .div3{
background-color: #00f;
}
</style>
</head>
<body>
<!-- .box>.div$*3 -->
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
相对定位特点
●相对定位元素它没有脱离标准文档流;
●相对定位元素如果没有设置定位的坐标,那么相对定位元素它还在原来的位置;
●相对定位元素设置了定位的坐标以后,那么它会在老家留下一个坑;
●相对定位元素它会将标准文档流中的元素压盖住;
●相对定位元素的定位坐标值可以是负数;
注意：
相对定位元素它会在老家留下一个坑，所以一般情况下它很少单独使用，相对定位元素它主要是用来配合“绝对定位”元素来使用的;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对定位案例</title>
<style type="text/css">
/*使用选择器来匹配元素*/
input[type="text"]{
font-size: 24px;
}
input[type="button"]{
position: relative;
top: 3px;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" />
<input type="button" name="" id="" value="检测用户名" />
</body>
</html>
转载请注明：大灰牛博客 » 相对定位relative