设置绝对定位对于子元素继承父元素的高度的影响

最新推荐文章于 2024-05-02 21:18:53 发布

爱早睡的老林

最新推荐文章于 2024-05-02 21:18:53 发布

阅读量1.1w

点赞数 5

分类专栏： css 文章标签：绝对定位子盒子高度继承

本文链接：https://blog.csdn.net/m0_38005587/article/details/81292339

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

笔者在写网页时，发现一个问题，当一个父元素没有设置高度，而全靠子元素1撑起高度时，此时子元素2就无法继承父元素的100%高度，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
        }
        .box img{
            /*父盒子靠img撑起高度*/
            width: 300px;
        }
        .cover{
            width: 100%;
            /*设置子盒子继承父盒子的100%高度*/
            height: 100%;
            background: rgba(0,0,0,0.5);
            /*position: absolute;*/
            /*left: 0;*/
            /*top: 0;*/
        }
    </style>
</head>
<body>
<div class="box">
    <img src="images/0.jpg" alt="">
    <div class="cover"></div>
</div>
<script>

</script>
</body>
</html>

此时子盒子的高度为0；

效果如下：

接着笔者利用子绝父相原理，设置子盒子为绝对定位，父盒子为相对定位，结果，子盒子能继承父盒子被撑起的高度了，代码如下：

  *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
              /**相对定位**/
            position: relative;
        }
        .box img{
            /*父盒子靠img撑起高度*/
            width: 300px;
         
        }
        .cover{
            width: 100%;
            /*设置子盒子继承父盒子的100%高度*/
            height: 100%;
            background: rgba(0,0,0,0.5);
            /*设置定位为绝对定位，脱离标准流*/
            position: absolute;
            left: 0;
            top: 0;
        }

效果图如下：

总结：子盒子脱离标准流，子盒子以1个局外人的身份去继承父盒子的高度，而子盒子在同一个标准流时，无法继承父盒子被其他盒子撑起来的高度。

爱早睡的老林

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
5
评论
设置绝对定位对于子元素继承父元素的高度的影响

笔者在写网页时，发现一个问题，当一个父元素没有设置高度，而全靠子元素1撑起高度时，此时子元素2就无法继承父元素的100%高度，代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/tit
复制链接

扫一扫