CSS之相对定位和绝对定位

2022-07-19 08:35:27

相对定位 position: relative; 的元素相对于其正常位置进行定位。
设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
绝对定位 position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
注意：“被定位的”元素是其位置除 static 以外的任何元素。

区别：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
四个普通的div盒子
在这里插入图片描述

代码如下：

<style>
        .div1{height:100px;background-color: red;}.div2{height:100px;background-color: green;}.div3{height:100px;background-color: yellow;}.div4{height:100px;background-color: blue;}
    </style>
</head>
<body>
    <div class="div1">第一个div</div>
    <div class="div2">第二个div</div>
    <div class="div3">第三个div</div>
    <div class="div4">第四个div</div>
</body>

relative的div不会影响其他div，原来的位置不会释放，其他div不能占用它原来的位置，是相对于原本自身位置来定位。

给第二个div设置relative

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

效果：
在这里插入图片描述
absolute的div会影响其他div，自身的一些因素也会发生变化，原来的位置会释放，其他div会占用它原来的位置，div2因为没有父元素，所以div2将使用文档主体（body），并随页面滚动一起移动。

给第二个div设置absolute

.div2{height:100px;background-color: green;position:absolute;top:50px;left:50px;}

效果：
在这里插入图片描述
给div2添加父元素，且对父元素进行absolute定位
对div2进行absolute定位

.outer{height: 200px;background-color: pink;position: absolute;}.div2{height:100px;background-color: green;position:absolute;top:50px;left:50px;}
        
 <div class="outer">
        这是一个大盒子AAA！！！
        <div class="div2">第二个div</div>
    </div>

效果：在这里插入图片描述
给div2添加父元素，且对父元素进行absolute定位
对div2进行relative定位

.outer{height: 200px;background-color: pink;position: absolute;}.div2{height:100px;background-color: green;position:relative;top:50px;left:50px;}

在这里插入图片描述
在对div2的父元素进行absolute定位的情况下，如果div2进行了absolute定位，那么div2是相对于父元素来定位；如果div2进行了relative定位，div2依旧是相对自身来定位。