绝对定位、固定定位、相对定位分别和浮动使用的影响

最新推荐文章于 2023-03-21 23:51:10 发布

micoria

最新推荐文章于 2023-03-21 23:51:10 发布

阅读量2.2k

点赞数 4

分类专栏：实例 css 文章标签： css

本文链接：https://blog.csdn.net/micoria/article/details/113659838

版权

css 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

实例

6 篇文章 0 订阅

订阅专栏

今天我们讲一下一个盒子使用绝对定位和浮动会有什么影响。

当一个盒子在另一个盒子的下边重叠，那么就会想到定位，这时就要想，是要使用绝对定位和相对定位。效果如图一：
在这里插入图片描述

下面分为三种情况

如果使用绝对定位，和浮动的效果，如图二

在这里插入图片描述
咱们看一下代码：

<style>
	.box1 {
            width: 100%;
            height: 50px;
        }
        
    .box1 div {
            float: left;
        }
    .box2 {
            width: 100%;
            height: 50px;
        }
	.box2 div {
            float: left;
            position: absolute;
            top: 20px;
            left: 0;
            border-radius: 15px;
        }
</style>

我给第二个盒子添加了绝对定位和浮动，浮动并没有起到作用。

因为绝对定位会脱标，由于没有给父盒子加相对定位，所以是由浏览器的窗口为准偏移。

所以如果想要如上图一的效果，第二个盒子的子盒子都要进行绝对定位的偏移。

如果使用固定定位，和浮动的效果，那么效果和第一种情况一样，fixed也会使元素进行脱标，添加浮动并不会有影响。
如果使用相对定位定位，和浮动的效果

效果就和图一的一样啦~所以使用浮动和相对定位，浮动就会有效果。

相关代码展示：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        /*本次布局使用的是流式布局*/
        .box1,
        .box2 {
            width: 100%;
            height: 50px;
        }
        .box1 div {
            float: left;
        }
        .one {
            width: 50%;
            height: 50px;
            background-color: aqua;
        }
        .two {
            width: 50%;
            height: 50px;
            background-color: rgb(222, 241, 235);
        }
        .box2 div {
            float: left;
            position: relative;
            top: -20px;
            left: 0;
            border-radius: 15px;
        }
        .box2 .one {
            background-color: rgb(176, 118, 231);
        }
        .box2 .two {
            background-color: rgb(75, 216, 40);
        }
    </style>
    <body>
    	<div class="box1">
        	<div class="one"></div>
        	<div class="two"></div>
   		</div>
    	<div class="box2">
        	<div class="one"></div>
        	<div class="two"></div>
    	</div>
</body>

原因：相对定位是根据自己自身的位置移动，他会保留原来的位置，就是不会脱标，并且对其他元素不会有影响。如果是想要后面的盒子往上移动，那么就可以使用margin-top或者其他方法进行移动。

总结：

绝对定位、固定定位分别和浮动一起使用，浮动就会不起作用
相对定位和浮动一起使用，浮动就会有效果
当然，之前在定位的文章里面提到过，浮动、绝对定位、固定定位元素的都不会触发外边距合并的问题。

如果想要科普一下定位的相关知识，童稚们可以在我之前的文章里面查找哦，如果有什么异议，可以私信或者在下面的评论区里面一起探讨.

micoria

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
绝对定位、固定定位、相对定位分别和浮动使用的影响

今天我们讲一下一个盒子使用绝对定位和浮动会有什么影响。当一个盒子在另一个盒子的下边重叠，那么就会想到定位，这时就要想，是要使用绝对定位和相对定位。效果如图一：下面分为三种情况如果使用绝对定位，和浮动的效果，如图二咱们看一下代码：<style> .box1 { width: 100%; height: 50px; } .box1 div { float: left
复制链接

扫一扫

专栏目录