CSS基础知识三（盒子相对定位）

@动感superman

已于 2024-11-10 13:41:09 修改

阅读量469

点赞数 19

文章标签： css 前端 html

于 2024-10-12 11:11:05 首次发布

本文链接：https://blog.csdn.net/2301_80208072/article/details/142869207

版权

1.相对定位概念（relatve）

2.相对定位语法

2.1 代码添加： positorr： relatve；

1.相对定位概念（relatve）

相对盒子原本位置定位; 盒子本体仍处于文档流中，占据原本位置，其他元素的布局不会因为它的偏移而受到破坏。相对定位常用于微调元素的位置，可以在网页布局中实现一些微小的调整。

2.相对定位语法

2.1 代码添加： positorr：relative；

2.2 相对定位属性

相对定位属性的语法如下：

作用	属性名
水平方向移动	left（左）、right（右）
垂直方向移动	top（上）、bottom（下）

注意:两个方向各选一个参数即可定位，定位的数值可以为负数。

2.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加入相对定位

<style>
        div{
            width: 100px;
            height: 100px;
            margin: 3px; }
        #div1{
            background-color: rgb(255, 0, 0);
            position: relative;
            left: 50px;
            top: 50px;}
        #div2{
            background-color: rgb(0, 255, 4); }
        #div3{
            background-color: rgb(43, 0, 255);}
    </style>
</head>
<body>
    <div id="div1">红</div>
    <div id="div2">绿</div>
    <div id="div3">蓝</div>
</body>

运行效果：