首页 > 其他分享> > CSS的相对定位详解

CSS的相对定位详解

2022-02-07 12:32:00 作者：互联网

大家好，今天给大家分享一下CSS的相对定位

看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid brown;
        }
        #first{
            border: green 1px dashed;
        }
        #second {
            border: lightsalmon 1px dashed;
        }
         #third{
             border: green 1px dashed;
         }

        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三盒子</div>
</div>
</body>
</html>

效果：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid brown;
            padding: 0;
        }
        #first{
            border: green 1px dashed;
            background-color: brown;
        }
        #second {
            border: lightsalmon 1px dashed;
            background-color: yellow;
        }
         #third{
             border: green 1px dashed;
             background-color: darkorchid;
         }

        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三盒子</div>
</div>
</body>
</html>

看效果：
在这里插入图片描述

相对定位：

 #first{
            border: green 1px dashed;
            background-color: brown;
            **position: relative;  /*相对定位*/
            top:-20px;
            left: 20px;**
        }

看效果：

在这里插入图片描述

写源码：

  #third{
             border: green 1px dashed;
             background-color: darkorchid;
             position: relative;
             bottom: 10px; 
             /*向下距离20px*/
             right: 20px;
         /*    向右平移20px*/
         }

相对定位： position: relative;
就是要更改这个属性，相对于原先的位置，进行指定的偏移，相对定位的话，它依然在标准文档流当中，原来的位置会被保留

bottom: 10px; 
         /*向下距离20px*/
         right: 20px;
     /*    向右平移20px*/

好了，CSS的相对定位就到这里了，谢谢大家

标签：定位,color,dashed,1px,详解,green,20px,border,CSS
来源： https://blog.csdn.net/weixin_47556601/article/details/122799661