绝对定位（absolute）与相对定位（relative）

一相对定位（父relative）
相对定位是元素相对于它原来在标准流中的位置来移动的

效果图：
这是一个（父亲）大盒子套了三个（儿子son1 、 son2 、son3）小盒子的效果图
在这里插入图片描述
现在我们在代码中给son1（黄色盒子）设置一个相对定位并且让其位置发生变化，刷新之后我们发现原有设置的边框盒子竟然给黄盒子留出空间了

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
          
            width: 100px;
            height: 300px;
            border: 1px solid black;
        }
        .son1{
            width: 100x;
            height: 100px;
            background-color: #12B7F5;
        }
        .son2{
            position: relative;  /*给黄色盒子设置一个相对定位 */
            left: 80px;
            top: 120px;
            width: 100px;
            height:100px;
            background-color: #f1e42b;
        }
        .son3{
            width: 100px;
            height: 100px;
            background-color: #12B7F5;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">1</div>
        <div class="son2">2</div>
        <div class="son3">3</div>
    </div>
</body>
</html>

相对定位的特点：

相对于自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子任然以标准流的方式对待它。

二：绝对定位（子absolute）
绝对定位是元素以带有定位的父级元素来移动位置
1 完全脱标–完全不占位置
2父亲元素没有定位，则以浏览器未准定位
在这里插入图片描述

在这里插入图片描述

绝对定位特点：*

绝对定位是以带有定位的父级元素来移动位置如果父级都没有定位，则以浏览器文档为准来移动位置
不保留原来的位置，完全是脱离标准流的。
因为绝对定位是盒子是（拼爹的），所以要和父级一起来使用。
定位口诀：子绝父相

绝对定位（absolute）与相对定位（relative）

猜你喜欢