Position relative元素

最新推荐文章于 2024-05-31 14:59:34 发布

「已注销」

最新推荐文章于 2024-05-31 14:59:34 发布

阅读量291

点赞数 2

分类专栏： positive:relative相对定位元素文章标签： css

本文链接：https://blog.csdn.net/Coastal_life/article/details/104737592

版权

positive:relative相对定位元素专栏收录该内容

1 篇文章 0 订阅

订阅专栏

相对定位元素解释

Position:relative; 使用这个元素，使得该元素变成相对定位元素

   <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        div{
            width: 120px;
            height: 120px;
            border: 1px solid #000;
            /* div边框 */
            margin-bottom: 10px;
            /* div底部有一个为10像素的距离 */
        }
    </style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

效果如下

在这里插入图片描述

现在为div="box2"添加position:relative属性背景颜色为orange

.box2{
position:relative;
background-color:orange;
}

效果如下，可以发现现在没有什么变化

在这里插入图片描述

现在可以使用

1.top
2.right
3.bottom
4.left

效果如下

left:30px;
在这里插入图片描述

相对原来的位置从左边框向右移动了30px

在这里插入图片描述
top:30px;

在这里插入图片描述

相对原来的位置从上边框到向下移动了30px

在这里插入图片描述
right:10px;

相对原来的位置从右边框向左移动10px

在这里插入图片描述
bottom:10px;

相对原来的位置从下边框向上移动了10px

在这里插入图片描述
最后是在实战的用途
position:relative;
在实战中的用途为：为元素进行微调

「已注销」

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Position relative元素

相对定位元素解释Position:relative; 使用这个元素，使得该元素变成相对定位元素 <style> *{ padding: 0px; margin: 0px; } div{ width: 120px; height: 120...
复制链接

扫一扫