相对定位

相对定位

如下图所见，有三个盒子竖着放，分别是红、蓝、绿

最外层为父元素，class=f，里面包裹着三个盒子

<div class="f">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
    </div>

分别给它们制定样式

.f {
            height: 650px;
            width: 500px;
            background-color: antiquewhite;
            border: 1px solid black;
        }
        
        .c1 {
            width: 200px;
            height: 200px;
            background-color: brown;
        }
        
        .c2 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        
        .c3 {
            width: 200px;
            height: 200px;
            background-color: green;
        }

要求：
希望中间的蓝色盒子和第一排的红色盒子一排，并且下面的绿色盒子不会挪动

要达到这种效果，只需要在中间的蓝色盒子样式中添加position:relative; top: -200px; left: 200px;
如下：

.c2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
            left: 200px;
            top: -200px;
        }

解释：
这里其实是开启了c2盒子的相对定位，相对于原来位置挪动，也就是下面这个点：原来位置的左上方的点，因此top为-200是向上移动，left为200是向右移动

特性：
1、除此之外，在上面的图中可以看到，下面的绿色盒子并没有因为中间盒子的移动而上移，因此证明蓝色盒子并没有脱离文档流
2、相对定位的盒子会提升一层，也就是说，像下图中这样，当开启蓝色盒子的浮动，并且位置正好和红色盒子的相同时，它会覆盖在上面，提升一层