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

最新推荐文章于 2023-02-09 20:57:35 发布

zhengTornado

最新推荐文章于 2023-02-09 20:57:35 发布

阅读量319

点赞数 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>

在这里插入图片描述
父盒子修改为relative，后面的黄色盒子以标准流对待父盒子。

zhengTornado

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Css相当定位与绝对定位案例

1 子绝父相意思如果要对一个子元素使用定位，那么应该是子元素是绝对定位，它的父元素为相对定位。让子元素以其父元素为标准来定位。如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。CSS的三种布局之定位（子绝父相）2 父盒子和子盒子都使用绝对定位出现的情况<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo
复制链接

扫一扫