Html第13集：相对定位

转载请标明出处：http://blog.csdn.net/zhaoyanjun6/article/details/127227861
本文出自【赵彦军的博客】

position: relative;

相对定位，首先我们来讲一下position: relative;

作用：相对于自身原来的位置进行偏移，属性有：top，left，right，bottom

原布局

    <style>

        .box1 {
    
    
            width: 100px;
            height: 100px;
            background-color: tomato;
        }

        .box2 {
    
    
            width: 100px;
            height: 100px;
            background-color: #bfa;
        }

    </style>


<div class="box1">1</div>
<div class="box2">2</div>

开启相对定位

    <style>

        .box1 {
    
    
            width: 100px;
            height: 100px;
            background-color: tomato;
        }

        .box2 {
    
    
            width: 100px;
            height: 100px;
            background-color: #bfa;
            position: relative;
            left: 100px;
            top: -100px;
        }

    </style>

<div class="box1">1</div>
<div class="box2">2</div>