Html第13集：相对定位

文章目录

• ​​position: relative;​​

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>