盒子的定位：相对定位

13 iug^

已于 2024-10-14 13:28:35 修改

阅读量310

点赞数 5

文章标签： html 前端

于 2024-10-11 21:09:06 首次发布

本文链接：https://blog.youkuaiyun.com/2401_87197766/article/details/142862753

版权

1、概念

2、使用相对定位，除了要将position属性值设置为relative外，还需要指定一定的偏移量。如下：

3、水平方向由left和right属性指定；垂直方向的偏移量由top和bottom属性指定。

4、相对定位示例

1、概念

使用相对定位的盒子会相对于自身原本的位置，通过偏移指定的位置，到达新的位置。即相对盒子原本位置定位；盒子本体仍处于文档流中，占据原本位置，且原本位置不受影响。

2、使用相对定位，除了要将position属性值设置为relative外，还需要指定一定的偏移量。如下：

position: relative;
            left: 50px;
            top: 50px;

3、水平方向由left和right属性指定；垂直方向的偏移量由top和bottom属性指定。

4、相对定位示例

（1）创建基本的HTML结构，即编写body内容

<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）将position属性值设置为相对定位

position: relative;

（4）调整位置：通过调整top,right,bottom,left属值，来控制相对定位

left: 50px;
top: 50px;

（5）完成布局

<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>

运行结果如下：