CSS的相对定位详解

最新推荐文章于 2024-07-25 08:14:42 发布

思诚代码块

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量1.4k

点赞数

分类专栏： CSS 系列笔记+源码展示文章标签： css 前端网页

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122799661

版权

CSS 系列笔记+源码展示专栏收录该内容

19 篇文章 4 订阅

订阅专栏

大家好，今天给大家分享一下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的相对定位就到这里了，谢谢大家

思诚代码块

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS的相对定位详解

大家好，今天给大家分享一下CSS的相对定位看代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 10px; padding: 5px; font-s
复制链接

扫一扫