Day.02.03 相对定位简单案例

作者: 挂树上的骷髅怪 | 来源:发表于2017-02-03 20:56 被阅读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