对于div的高度问题

关于视频中的这一现象的问题。

图中我们看到文字是出现在绿色的部分的，因为3个元素块的父类div采用了相对定位的方式，保留了它原来的位置。并且由于设定所有的div类的高度为height100。所以空出了100px的距离。

那么问题就是既然父类的div设定了100px的高度，那为什么我们却可以在图中看到3个元素块呢？不应该绿色和蓝色隐藏在了下面吗？如果子类的高度撑起了父类的高度，那为什么父类div的高度还停留在原始设定的100px呢？

戴JAVA老师的小迷弟 2020-03-05

源自：CSS定位 3-4 相对和绝对定位3

收起

1回答

guly 2020-03-06 10:14:57

你好，

父元素即使设置了高度为100px，但是没有设置超出隐藏，下面两个元素还是显示的如果想隐藏，可以用overflow:hidden;

可以参考一下代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        section {
            width: 100%;
            height: 100px;
            position: relative;
        }
        
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    <section>
    <p>1111111111111111111111111111111111</p>
</body>
<html>

如果解决您的问题请采纳，祝学习愉快！

收起回答