CSS子绝父相的直观解释

公子扶__我一下谢谢！

已于 2022-04-27 00:44:08 修改

阅读量479

点赞数 2

分类专栏：学习路上的绊脚石们文章标签： css

于 2022-04-27 00:39:50 首次发布

本文链接：https://blog.csdn.net/weixin_46475770/article/details/124440003

版权

学习路上的绊脚石们专栏收录该内容

4 篇文章 1 订阅

订阅专栏

CSS子绝父相的直观解释

相对定位 position:relative;
绝对定位 position:absolute;

顾名思义，相对定位，其必然是相对于某个元素而言，它才有意义。
而此处只与其父元素有关：
若没有父元素，则仅相对于body产生相对位置变化。
若有父元素，需要在父元素的CSS样式里添加一句：

position:relative;

那么此时你可能会产生疑问：
那我就不给父元素设置相对定位，子元素会怎样？

// 设置两个盒子
<!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>
        <link rel="stylesheet" href="jk.css">
</head>

<body>
    <div class="fir">
        <div class="sec"></div>
    </div>
</body>

</html>

// 父元素不设置position
* {
    margin: 0;
    padding: 0;
}

.fir {
    width: 500px;
    height: 500px;
    background-color: aquamarine;
}

.sec {
    position: absolute;
    top: 20px;
    right: 70px;
    width: 200px;
    height: 200px;
    background-color: darkgreen;
}

显然，此时子元素已经脱离了父元素的掌控，位置变化也是相对于整个浏览器而言了。
在这里插入图片描述
那么若给父元素添加一个定位呢？

// 设置两个盒子
<!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>
        <link rel="stylesheet" href="jk.css">
</head>

<body>
    <div class="fir">
        <div class="sec"></div>
    </div>
</body>

</html>

// 父元素设置position为relative
* {
    margin: 0;
    padding: 0;
}

.fir {
    position: relative;
    top: 100px;
    left: 150px;
    width: 500px;
    height: 500px;
    background-color: aquamarine;
}

.sec {
    position: absolute;
    top: 20px;
    right: 70px;
    width: 200px;
    height: 200px;
    background-color: darkgreen;
}