定位中为什么要按子绝父相的原则？

最新推荐文章于 2024-02-12 21:19:35 发布

我爱君君吖～

最新推荐文章于 2024-02-12 21:19:35 发布

阅读量324

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/qq_62649563/article/details/129819025

版权

文章详细解释了CSS中绝对定位和相对定位的区别。绝对定位移位后不再占用原来的空间，而相对定位则仍保持其在文档流中的位置。示例代码展示了如何使用left和bottom属性进行定位，并提供了一个HTML示例来帮助理解。

摘要由CSDN通过智能技术生成

1.首先我们先搞懂绝对定位和相对定位的区别

绝对定位移动之后相较于之前其不占空间什么意思呢？看下面的图

原来的图：

绝对定位移动之后：

相对定位移动之后：

那么由此我们可以看出，当未加定位时，div保持他块内元素的特性，独占一行，当其加了绝对定位之后，便不占一行了。加了相对定位之后。仍然独占一行，只不过此时是右边的。而这个原则的作用就是为了保证父级在这个位置不变（还没变化之前），就是父级需要定位。

2.说一下相对定位和绝对定位的理解

相对定位和绝对定位都差不多，那么当我们定位之后移动位置的时候，就需要注意了。结合下面的代码来理解。

        .box{
            background-color: #deabab;
            /* position: absolute; */
            left: 200px;
            bottom: 300px;

            width: 200px;
            height: 200px;
        }

left：200px 意思是相对于父级而言，距离他左边200px。那么其他的就可以同理而言啦~

3.贴下我上面例子的源代码（有需要的宝子来取）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: #deabab;
            /* position: absolute; */
            left: 200px;
            bottom: 300px;

            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <div class="box"></div>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>
    <p>111111111111111111111111111111111111111111111</p>

</body>
</html>

再见啦~ 生活愉快哦