Bootstrap 4中相对定位

在Bootstrap 4中，相对定位是指通过指定元素相对于其当前位置的偏移量来定位元素。这可以通过设置CSS样式中的position属性为relative来实现。

设置相对定位

要设置相对定位，请将元素的CSS样式中的position属性设置为relative，并指定要移动的偏移量。例如，将top属性设置为50px，将元素向下移动50个像素：

<div style="position: relative; top: 50px;">
    <p>Hello World!</p>
</div>

输出结果如下：

相对于另一个元素定位

要将一个元素相对于另一个元素进行定位，请将目标元素的CSS样式中的position属性设置为relative，并将要相对于其定位的元素的CSS样式中的position属性设置为absolute。接下来，指定要移动的偏移量。例如，在下面的代码中，div1元素将相对于div2元素定位：

<div style="position: relative;">
    <p>Hello World!</p>
    <div style="position: absolute; top: 50px; left: 50px;">
        <p>I'm relative to the previous paragraph.</p>
    </div>
</div>

输出结果如下：

更多定位选项

在Bootstrap 4中，还有其他定位选项可供选择，如静态定位（默认定位）、绝对定位和固定定位。您可以在Bootstrap官方文档中了解更多信息。

参考资料

• Bootstrap 4 官方文档
• w3schools.com