CSS的相对定位详解

2022-02-07 12:32:00 阅读：167 来源： 互联网

标签：定位 color dashed 1px 详解 green 20px border CSS

大家好，今天给大家分享一下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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS的相对定位详解