盒子的定位：相对定位

Komorebi⁼

于 2024-10-11 13:51:27 发布

阅读量317

点赞数 7

文章标签： html css 前端

本文链接：https://blog.csdn.net/2302_81659011/article/details/142830735

版权

1、概念

相对定位是通过设置CSS属性position:relative来实现的。当一个元素被设置为相对定位时，它会相对盒子原本位置定位进行偏移，盒子本体仍处于文档流中，占据原本位置。这意味着它原本在文档流中所占的空间仍然保留，其他元素的布局不会因为它的偏移而受到破坏。

2、相对定位语法

选择器{position:relative;}

3、相对定位的使用

(1)创建一个HTNL结构

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

（2）添加CSS属性

 <style>
     div{
                width: 100px;
                height: 100px;
                margin: 3px;

            }
            #div1{
                background-color: red;

            }
            #div2{
                background-color: green;
            }
            #div3{
                background-color: blue;
            }
    </style>

此时代码运行结果如下：

（3）为div1加入相对定位

<head>
    <style>
     div{
                width: 100px;
                height: 100px;
                margin: 3px;

            }
            #div1{
                background-color: red;
                position: relative;
                top: 50px;
                left: 50px;

            }
            #div2{
                background-color: green;
            }
            #div3{
                background-color: blue;
            }
    </style>
   
    
</head>
<body>
    <div id="div1">红</div>
    <div id="div2">绿</div>
    <div id="div3">蓝</div>
</body>
</html>

此时运行结果如下：