一. 相对定位基本使用

相对定位是三种定位中最简单的.

给元素添加属性:

position : relative;

则这个元素就会相对定位.

这个时候这个元素没有任何的位置的变化, 如果想让元素有变化, 则需要下面四个属性来设置.

四个属性的值, 可以是正也可以是负

• left 左偏移(左边缘距离元素原来的左边缘的距离, 正的向右跑, 负的向左跑)

• right右偏移(右边缘距离元素原来的右边缘的距离, 正的向左跑, 负的向右跑)

• top上偏移(上边缘距离元素原来的上边缘的距离, 正的向下跑, 负的向上跑)

• bottom下偏移(下边缘距离元素原来的下边缘的距离, 正的向上跑, 负的向下跑)

总结:

• 正的表示, 元素在哪个方向, 就朝哪个方向跑.

• 都是参考元素没有定位时的位置的一个偏移量. 这是和其他定位的区别

• left和right不要同时设置. top和bottom不要同时设置.

<style>
* {
    padding: 0;
    margin: 0;
}

div {
    width: 200px;
    height: 100px;
    background-color: pink;

}

.two {
    background-color: gray;
    position: relative;
    left: 20px;
    top: 40px;
}

.three {
    background-color: lightgreen;
}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

看下面的动图:

说明:

• 偏移量都是相对于自己没有定位的时候的偏移量, 这也是相对定位中相对这个词的含义

• 相对定位会离开自己的位置, 但是不会对其他元素有任何的布局影响. 就像你虽然来深圳工作了, 但是户口还在老家. 拆迁的时候还是会给你💰的.

• 相对定位的元素虽然离开了自己原来的位置, 但是其他元素并不会顶上去. 人不在了, 但是影响还在. 其实也就是相对定位的元素并没有脱离文档流.

• 如果left和right同时存在, 则left起作用, right无效. 不要这么做

• 如果top和bottom同时存在, 则top起作用, bottom无效. 不要这么做

• 也可以对已经浮动的元素添加相对定位. 你就想想没有相对定位的时候元素在什么位置, 这个位置就是相对的那个位置.

• 都是相对于没有定位的时候偏移量.

二. 使用相对定位的地方

1. 对元素的位置进行微调

   相对定位调整元素位置不会影响到其他元素的布局, 所以特别适合做一些微调.

   如果调整幅度比较大, 有更好的绝对定位好用.

2. 给绝对定位的元素做参考元素

   马上学习.