CSS中的相对定位和绝对定位

最新推荐文章于 2023-06-04 22:58:06 发布

nudt_oys

最新推荐文章于 2023-06-04 22:58:06 发布

阅读量398

点赞数 1

分类专栏： HTML-CSS

本文链接：https://blog.csdn.net/qq_26658823/article/details/73264419

版权

HTML-CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

相对定位
在CSS中，我们可以将position属性的值设置成relative来对元素进行相对定位。如果对某元素设置了相对定位，那么该元素仍然会出现在标准文档流中它原本的位置。然后我们可以通过设置left、top等属性，让这个元素以它原来的位置为参照物进行移动。只要position属性的值为relative，无论是否对该元素进行移动，元素仍然占有原来的空间。因此，使用相对定位移动元素会使它覆盖其他框。
绝对定位
将position属性的值设置为absolute可以对元素进行绝对定位。使用了绝对定位的元素被从标准文档流中移除，即不占用原来的空间，并且该元素会相对于最近的已经定位的祖先元素进行定位，如果该元素没有已定位的祖先元素，那么它就会相对于其最外层的祖先元素进行定位。
简单来说，相对定位是“相对于”元素在文档中的初始位置；而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么就“相对于”最初的包含块。
实例

<!DOCTYPE html>
<html>
<head>
    <title>CSS中的相对定位和绝对定位</title>
    <style type="text/css">
        body {
            background-color: pink;
        }
        div {
            width: 200px;
            height: 100px;
        }
        .boxes {
            height: 300px;
            border: 3px solid black;
        }
        .box1 {
            background-color: red;
        }
        .box2 {
            background-color: green;
        }
        .box3 {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="boxes">
        <div class="box1">
            111
        </div>
        <div class="box2">
            222
        </div>
        <div class="box3">
            333
        </div>
    </div>
</body>
</html>

上述代码的运行结果如下图所示：
这里写图片描述
然后，我们对class为box2的div元素使用相对定位

.box2 {
            position: relative;
            left: 100px;
            top: 50px;
            background-color: green;
        }

结果如下图：
这里写图片描述
可以看出，使用相对定位后，该元素相对于它的初始位置向下移动了50px，向右移动了100px，并且将class为box3的div元素覆盖了。然后我们直接对class为box2的div元素使用绝对定位，代码只需要将position:relative;改为position:absolute;就可以了。运行结果如下：
这里写图片描述
可以看出，class为box2的div元素相对于body元素向下移动了50px，向右移动了100px。并且它脱离了标准文档流，class为box3的div元素占据了它原来的位置。然后，我们把class为boxes的div元素设置成相对定位，把class为box2的div元素设置成绝对定位，看一下有什么效果。
代码：

.boxes {
            position: relative;
            top: 100px ;
            height: 300px;
            border: 3px solid black;
        }
 .box2 {
            position: absolute;
            left: 100px;
            top: 50px;
            background-color: green;
        }

可见，class为boxes的div元素相对于它之前的位置向下移动了100px，而class为box2的div元素相对于它的父元素（即class为boxes的div元素）向下移动了50px，向左移动了100px。
这里写图片描述

nudt_oys

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中的相对定位和绝对定位

相对定位在CSS中，我们可以将position属性的值设置成relative来对元素进行相对定位。如果对某元素设置了相对定位，那么该元素仍然会出现在标准文档流中它原本的位置。然后我们可以通过设置left、top等属性，让这个元素以它原来的位置为参照物进行移动。只要position属性的值为relative，无论是否对该元素进行移动，元素仍然占有原来的空间。因此，使用相对定位移动元素会使它覆盖
复制链接

扫一扫