CSS相对定位

阅读次数: 次 2020-08-26

字数：1.5k字 | 预计阅读时长：5分钟

CSS 插圖

1 文档流

在介绍CSS定位之前，有必要先介绍一下CSS的文档流这个概念。

一个HTML文件就是一篇HTML文档，在这个文档中会按照一定顺序排列着许许多多的元素。

什么样的顺序呢？

从左至右
从上到下

例如：

在文档中一开始有一个元素，那么它将处于网页的左上角
当有第二个元素后，第二个元素将会排列在第一个元素的后面
随后，我们又在文档中定义了第三个元素，元素，执照顺序它该排列在第二个元素后面，但它是一个块级元素，必须单独占据一行。因此，它将排列到下一行。
如果后面再有一个元素，让它补到第一行后面的空白地方吧？
不行，尽管那里有空白，也不能用。元素看起来很霸道，后面的元素必须排在它后面

理解了文档流以后，就可以开始理解相对定位了。

2 引文

在CSS的几种定位中，只有relative可以让元素保持在正常的文档流中。上来就说这句话，可以并不能理解是什么意思，我们不妨来试一下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        span {
            color: #fff;
            background-color: #fd79a8;
        }

        p {
            color: #fff;
            background-color: #fd79a8;
        }

        .relative {
            /* 开启相对定位 */
            position: relative;
            /* 设置左侧偏移量 */
            left: 10px;
            /* 设置顶部偏移量 */
            top: 10px;
        }
    </style>
</head>

<body>
    <span class="relative">我是第一个元素span</span>
    <span>我是第二个元素span</span>
    <p>我是p元素,是一个块级元素,需要独占一行</p>
</body>

</html>

页面效果如下：

和上面的图对比一下，不难发现以下几点：

第一个元素的位置发生了变化，向下移动了一些，也向右移动了一些。
但是其他元素没有受到任何影响
第一个元素的内容覆盖了第二个元素的内容，似乎跑到了它的上方

接下来，我们就要开始围绕着这几点内容展开对相对定位的理解

3 相对定位

相对自身原有位置偏移

设置position: relative就会为元素开启相对定位，所谓相对定位，是指这个元素相对于它在文档流中的原有位置进行定位。再通过设置left、right、top、bottom就可以让元素距它的原有位置偏移指定距离。

例如，在上面的代码中：

.relative {
    /* 开启相对定位 */
    position: relative;
    /* 设置元素的左侧距它在文档流中正常位置多少距离，即向右偏移多少 */
    left: 10px;
    /* 设置元素的上侧距它在文档流中正常位置多少距离，即向下偏移多少 */
    top: 10px;
}

这就解释了第一点，元素为何向下、向右移动。

不影响其他元素

设置了相对定位的元素，尽管它的位置变化了，但是它原来在文档流中的位置还是存在的（尽管你看到的是空白，它也占据）。因此，并不会影响到其他元素的布局。

这就解释了第二点。顺便还可以说明，设置相对定位的元素是没有脱离文档流的。

相对定位的层叠顺序

设置了相对定位的元素，它会跑到文档流中的元素的上面，因此，就会出现覆盖正常元素的现象。

🔔🔔🔔但是，要注意！这并不意味着它脱离了文档流！要和脱标导致的元素覆盖区别开来

4 注意事项

对立方向上的定位值只有一个生效

所谓对立方向上的定位值只有一个生效，指的是：

同时设置left和right时，只有left会生效；
同时设置top和bottom时，只有top会生效；

还是同样的代码，我们再设置一次试试

/* 部分关键样式 */
.relative {
    /* 开启相对定位 */
    position: relative;
    /* 设置右侧偏移量 */
    right: 10px;
    /* 设置底部偏移量 */
    bottom: 10px;
}

页面效果：

当设置了right和bottom时，可以看到，也是生效的

当同时设置对立方向的值时，再来看一下：

.relative {
    /* 开启相对定位 */
    position: relative;
    /* 设置左侧偏移量 */
    left: 10px;
    /* 设置右侧偏移量 */
    right: 10px;
    /* 设置顶部偏移量 */
    top: 10px;
    /* 设置底部偏移量 */
    bottom: 10px;
}

页面效果：

看到了吧，元素的位置变化和只设置left和top是一样的。

如今世道变了，right和bottom应该是雌的，left和top是雄的，right和bottom见了老公不敢扬威了！

百分比值

定位值除了可以设置px等单位，还支持设置百分比。这是一个不得不提的问题，因为CSS的很多属性都支持百分比，但是它们又有区别。

相对定位中的百分比是相对于包含块的，其中left和right是相对于包含块的宽度，top和bottom是相对于包含块的高度。

.relative {
    /* 开启相对定位 */
    position: relative;
    /* 设置左侧偏移量 */
    left: 100%;
    /* 设置顶部偏移量 */
    top: 100%;
}

页面效果：

当设置左侧偏移量为100%时，元素的左侧边界到达了父容器右侧的边界，刚好移动了一个父元素宽度的距离。

当设置顶部偏移量为100%时，元素的顶部边界到达了父容器底部的边界，刚好移动了一个父元素高度的距离。

本文作者： CoderLeiShuo
本文链接：https://coderleishuo.github.io/lele/20232.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！

好的东西应该像粥，是用时间熬出来的—— CoderLeiShuo