relative和absolute的区别——带例子说明

最新推荐文章于 2023-05-24 22:16:01 发布

GaHin_

最新推荐文章于 2023-05-24 22:16:01 发布

阅读量2k

点赞数 6

文章标签： html html5 css3 css

本文链接：https://blog.csdn.net/weixin_44066534/article/details/107118716

版权

relative和absolute的区别，话不多说，先上代码

<html>
    <head>
        <style>
            .container{
                width: 300px;
                height: auto;
                background: rgb(54, 181, 219);
                positive：relative;
            }
            .box{
                width: 100px;
                height: 100px;
                border: 2px solid rgb(247, 129, 129);
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>
</html>

结果如下
在这里插入图片描述
给box添加属性relative，并赋予left和top偏移量

<div class="box" style="position: relative;
						left:50px;
						top: 50px;"></div>

结果如下
在这里插入图片描述
可见，relative这个属性并没有脱离文档流的，所以元素box本身所占的位置会保留，相对于其正常的位置向下和向右移动了50px的距离。

将relative属性换成absolute

<div class="box" style="position: absolute;
						left:50px;
						top: 50px;"></div>

结果如下
在这里插入图片描述
此时absolute元素脱离了正常的文档流，所以其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。

那么，当对 absolute 元素添加 left:50px 定位后，这个 left 究竟是对哪个元素而言呢？其实，此时将会往上查找absolute 元素的第一个父元素，如果该父元素的 position 值存在（且不为 static）,那么这个 left和top 就是根据该父元素进行的定位（上述box的父元素为container，其position为relative），否则将会继续查找该父元素的父元素，一直追溯到某个父元素具备不为 static 的 position 值为止，如果不存在满足条件的父元素，则会根据最外层的 window 进行定位。

GaHin_

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
relative和absolute的区别——带例子说明

relative和absolute的区别，话不多说，先上代码<html> <head> <style> .container{ width: 300px; height: auto; background: rgb(54, 181, 219); positive：relative;
复制链接

扫一扫