Day.02.03 相对定位简单案例

<!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
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容