盒子的相对定位_改变盒子相对位置的·代码-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_80916083/article/details/142894133

在使用盒子的相对定位时，盒子相对的是自身原本在文档流中的位置，通过偏移自身的位置后（偏移值可以为负数），到达新的位置。相对定位不脱离文档流，即使元素偏移了位置，它原本所占的空间仍然保留在文档流中，不会影响其他元素的排列。使用相对定位后，图片之间可能会重叠。

使用相对定位时，要将position（定位）属性值设置为relative（相对的），还需要指定一定的偏移量。其中,水平方向的偏移量由 left 和 right 属性指定;垂直方向的偏移量由盒子top 和 bottom 属性指定。两个方向各选一个参数即可定位。

图像原本在文档流中的效果显示：

运行代码如下：

  <style>
/* 在文档流中的位置，相当于最先的父元素 */
        #img1{
            width: 100px;
            height: 100px;
            border: 5px red solid;
        }

        #img2{
            width: 100px;
            height: 100px;
            border: 5px green solid;
        }

        #img3{
            width: 100px;
            height: 100px;
            border: 5px blue solid;
        }
</style>
</head>
<body>
    <img src="./666.jpg" id="img1">
    <img src="./666.jpg" id="img2">
    <img src="./666.jpg" id="img3">
</body>

在通过position属性设置后偏移后的位置（图片相对的是自身原本的位置）效果显示：

运行代码如下：

<style>
        #img1{
            width: 100px;
            height: 100px;
            border: 5px red solid;
        }

        #img2{
            width: 100px;
            height: 100px;
            border: 5px green solid;
/* 通过position属性设置relative相对定位 */
            position: relative;
   /* 距离父容器左边偏移的值为30px */
            left: 30px;
 /* 距离父容器顶部偏移的值为50px */
            top: 50px;
        }

        #img3{
            width: 100px;
            height: 100px;
            border: 5px blue solid;
            position: relative;
 /* 偏移值可以为负数 */
            left: -20px;
            top: 10px;
        }
 </style>
</head>
<body>
    <img src="./666.jpg" id="img1">
    <img src="./666.jpg" id="img2">
    <img src="./666.jpg" id="img3">
</body>