Css相当定位与绝对定位案例

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

zhengTornado

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

阅读量372

点赞数 2

分类专栏：大前端文章标签： html css 定位 html5

本文链接：https://blog.csdn.net/zhengtornado/article/details/111415024

版权

大前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1 子绝父相意思

如果要对一个子元素使用定位，那么应该是子元素是绝对定位，它的父元素为相对定位。让子元素以其父元素为标准来定位。
如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。
CSS的三种布局之定位（子绝父相）

2 父盒子和子盒子都使用绝对定位出现的情况

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子绝父绝</title>
    <style>
        .top {
            /* 父盒子使用绝对定位 */
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .down {
            width: 400px;
            height: 400px;
            background-color: orange;
        }
        /*子盒也使用绝对定位*/
        .son {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <!-- 父盒子 -->
    <div class="top">
        <!-- 子盒子 -->
        <div class="son"></div>
    </div>
    <!-- 父盒子的兄弟盒子 -->
    <div class="down"></div>
</body>

</html>

在这里插入图片描述
以上结果得出结论：父盒子和子盒子都是绝对定位时，父盒子由于脱标导致不保留自己原来的位置，造成下面的盒子占用了父盒子原来的位置。

3子绝父相出现的情况

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子绝父相</title>
    <style>
        .top {
            /* 父盒子使用相对定位 */
            position: relative;
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .down {
            width: 400px;
            height: 400px;
            background-color: orange;
        }
        /*子盒也使用绝对定位*/
        .son {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <!-- 父盒子 -->
    <div class="top">
        <!-- 子盒子 -->
        <div class="son"></div>
    </div>
    <!-- 父盒子的兄弟盒子 -->
    <div class="down"></div>
</body>

</html>