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

程序员文章站 2022-04-24 22:31:47

...

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

当一个盒子在另一个盒子的下边重叠，那么就会想到定位，这时就要想，是要使用绝对定位和相对定位。效果如图一：
绝对定位、固定定位、相对定位分别和浮动使用的影响

下面分为三种情况

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

绝对定位、固定定位、相对定位分别和浮动使用的影响
咱们看一下代码：

<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或者其他方法进行移动。

总结：

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

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

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

html/css中相对定位relative和绝对定位absolute的用法

HTML定位——绝对定位和相对定位、固定定位

html/css中相对定位relative和绝对定位absolute的用法

绝对定位和浮动的问题，求大神帮忙解决_html/css_WEB-ITnose

详解CSS的相对定位和绝对定位

关于浮动和绝对定位的区别，到底是怎么回事？_html/css_WEB-ITnose

CSS父子DIV绝对定位和相对定位的位置关系是怎样的?_html/css_WEB-ITnose

块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解_html/css_WEB-ITnose

理解CSS相对定位和固定定位 - 小火柴的蓝色理想

如何通过css的绝对定位和固定定位来实现HTML元素的居中？