盒子的相对定位

努力小贼

已于 2024-10-12 10:55:44 修改

阅读量194

点赞数 6

分类专栏： web前端文章标签： html 前端

于 2024-10-12 09:45:17 首次发布

本文链接：https://blog.csdn.net/2302_81399643/article/details/142868657

版权

web前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

想要了解盒子的相对定位，首先要清楚盒子的定位是怎样的：

盒子的定位是使用 position 属性来实现不同的定位方式，其参数为 static（静态定位）、 relative（相对定位）、 absolute（绝对定位）和 fixed（固定定位）；元素的位置通过 left 、top 、right 以及 bottom 属性进行规定。

相对定位的概念

相对定位是相对于盒子自身的原始位置进行定位。通过设置top、right、bottom、left属性（其属性值可为负数），可以改变盒子的位置，但是其他元素不会受到影响。相对定位的元素在文档流中仍然占据原始位置。也就是说，在相对定位中，盒子并没有脱离文档流，它不会影响其他元素的布局，并且在正常文档流中保持其占据的空间，网页中的文档流机制的流水线排布方式还是存在。

下面通过实例来讲解：

下面是三个Div元素在正常文档流网页中的排列方式：

下面是通过相对定位将绿色Div元素分别相对于上边距和左边距偏移50px：

其代码为：


<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin: 3px;
        }
        #div1{
            background-color: red;

        }
        #div2{
            background-color: green;
            /* 使用相对定位 */
            position: relative;
            left: 50px;
            top: 50px;
        }
        #div3{
            background-color: blue;

        }
    </style>
</head>
<body>
    <div id="div1">红</div>
    <div id="div2">绿</div>
    <div id="div3">蓝</div>
</body>

由上可以看见，即使绿色Div元素移动之后，它原来的位置始终保留着，蓝色Div元素并没有占据它的位置。（就好比图一红黄绿坐在自己位置上看表演，图二绿站起来去到旁边，但是它的椅子还是在原来的位置，没人能够移动和占据那把椅子），这就是保留在网页中的文档流的强大

相对定位练习：

运行出如下效果：

示例代码：

<head>
    <style>
        img{
            width: 100px;
            height: 100px;

        }
        #img1{
            width: 100px;
            height: 100px;
            border: 3px red solid;
        }
        #img2{
            width: 100px;
            height: 100px;
            border: 3px green solid;
            position: relative;
            top: 50px;
            left: -50px;
        }
        #img3{
            width: 100px;
            height: 100px;
            border: 3px blue solid;
        }
        div{
            width: 100px;
            height: 100px;
            border: 3px yellow solid;
        }
    </style>
</head>
<body>
    <img src="../html5.jpg" alt="" id="img1">
    <img src="../html5.jpg" alt="" id="img2">
    <img src="../html5.jpg" alt="" id="img3">
    <br>
    <img src="../html5.jpg" alt="">
    <img src="../html5.jpg" alt="">
    <img src="../html5.jpg" alt="">
    <div></div>
    <div></div>
    <div></div>

</body>