CSS中相对定位与绝对定位辨析_css正方形绝对定位-CSDN博客

本文链接：https://blog.csdn.net/weixin_42511413/article/details/120892605

一、CSS中Position的定义

在辨析position的几个变量设置的区别之前，先简单的介绍一下position在css中中的作用。与position的英文同义，position在css中是用来设置元素在文档流中的位置的，设置元素的定位之后，可以通过left、right、top、bottom来设置元素在页面中的定位。那么，重点来啦！新手可能对于相对定位与绝对定位之间的区别与如何使用存在很大的疑惑，那就来看看今天的辨析吧！

二、position的相对定位与绝对定位

以下的内容都是针对于黄色正方形来设置定位。

1. relative

将元素的position设置为相对定位之后，元素同样不会脱离文档流，那么relative与static之间存在什么区别呢？relative是参照元素在文档流中的位置进行定位的，当不设置偏移量的时候，位置与设置static是完全相同的。除此之外，相对定位会提升元素的层级。

position: relative;
top: 10px; left: 40px;

在这里插入图片描述

3. absolute（绝对定位）

当元素开启了绝对定位之后，该元素会脱离文档流，同时，在开发时会经常遇到相对定位与绝对定位的配合使用。设置绝对定位的元素是基于哪个元素设置的绝对定位呢？答案是该元素的父元素，如果不存在父元素，那么就是针对于整个body设置绝对定位。在开发的过程中，通常会将绝对定位的基准元素的position设置为relative。

position: absolute;
top: 90px; left: 40px;

在这里插入图片描述
看到这里，你是不是对这两个概念还是很模糊呢？接下来我们动手试试吧~

三、Example

base.css

    .box {
        width: 1299px;
        height: 100px;
        background: pink;
        color: #fff;
        position: relative;
    }

    .box1 {
        top: 50px;
        left: 10px;
        background: rgb(132, 160, 121);
        position: relative;
    }

    .box2 {
        top: 50px;
        left: 10px;
        background-color: #999;
    }

index.html

	<div>
        <div class="box1">我是开启绝对定位的box</div>
        <div class="box2">我是没有设置position的box</div>
    </div>

效果图:
在这里插入图片描述