Day.02.03 相对定位简单案例
2017-02-03 本文已影响17人
挂树上的骷髅怪
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 相对定位 </title>
<style type="text/css">
.div1{
width:600px;
height:400px;
border:1px solid red;
}
.div2{
width:100px;
height:60px;
background-color:#ADD8E6;
float:right;
margin:20px;
}
.te1{
left:60px;
top:20px;
position:relative;/*开启相对定位*/
}
.te2{
left:10px;
top:320px;
position:relative;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">丁酉年</div>
<div class="div2 te1">壬寅月</div>
<div class="div2 te2">辛酉日</div>
<div class="div2">正月初七</div>
</div>
</body>
</html>
小结:
1.内容二移动位置是相对div当时的位置;
2.当时的空间会保留;
3.如果相对定位后的盒子与原来的盒子发生冲突,则会覆盖
相对定位.png
