CSS定位之相对定位_css 如何相设置相对位置-CSDN博客

本文链接：https://blog.csdn.net/weixin_74401967/article/details/140571433

相对定位的用途就是用于布局的微调，通常会与绝对定位结合使用。

如何设置相对定位？

在CSS样式中

给元素设置position : relative即可实现相对定位，其中，position是位置的意思，relative是相对的意思，然后可以使用left、right、top、bottom四个属性来调整元素的位置

相对定位的参考点在哪？

相对定位的原点就是在开启相对位置那行代码之前所在的位置。

相对定位的特点：

1.开启相对定位的元素，它并没有脱离文档流（下方元素不会跑上来占位置）它会在文档流里面一直占位置

2.开启相对定位的元素可以超出父元素所在的区域

3.一个元素要是开启了定位，那么它的层级就会比普通元素要高，如果两个元素都开了定位，那就遵循后来者居上原则（注意这里说的定位不止相对定位）

4.开启相对定位之后，left和right不能同时写，只要写了left，right就会失效。top和bottom不能同时写，只要写了top，bottom就会失效（无关向后顺序）

5.即使开启相对定位之后，依然可以通过调整外边距，边框和内边距来调整位置，也就是margin、padding等等是可以使用的，但是不推荐。同样的也不推荐开启定位之后再让元素进行浮动，这两种行为都可能会导致布局的紊乱。

下面是参考代码,里面有注释，可以自行调试

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_相对定位</title>
    <style>
        .outer {
            width: 500px;
            background-color: skyblue;
            border: 1px solid black;
            padding: 20px;
        }
        .box {
            width: 200px;
            height: 200px;
            font-size: 20px;
        }
        .box1 {
            background-color: #888;
        }
        .box2 {
            background-color: orange;
            /* position 是位置的意思，relative有相对的意思 */
            position: relative;
            left: 100px;
            /* right: 50px; */
            /* 相对定位，相对的是自己原来的位置 */
            /* 开启相对定位的元素，它并没有脱离文档流（下方元素不会跑上来占位置）
            它会在文档流里面一直占位置 */
            
            /* 开启相对定位的元素可以超出父元素所在的区域 */
            
            /* right: 50px; */
            /* left: 50px; */
            /* left和right不能同时写，只要写了left，right就会失效 */

            /* bottom: 50px;
            top: 50px; */
            /* top和bottom不能同时写，只要写了top，bottom就会失效 */
            /* top: 50px; */
            /* 相对定位它会直接盖在别的元素身上：
            
            一个元素要是开启了定位，那么它的层级就会比普通元素要高，
            如果两个元素都开了定位，那就遵循后来者居上原则
            
            */
            /* margin-left: 50px; */
            /* 定位之后也可以写margin-left等等属性,但是不推荐 */
            
            /* 定位之后也可以开启浮动，但是元素会往上飘，也就是不占位置，脱离文档流,但是也不推荐一起用 */
            float: left;

        }
        .box3 {
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
</body>
</html>