Question

所以我不是一名网络开发人员，对html和css的经验很少，所以这可能听起来很愚蠢：

但是我看到了我的同事的代码，他们将section设置为position:relative，并将子元素（本例中为h1）设置为position: absolute; top: 0; left: 0; height: 100%; width:100%，并以某种方式{ {1}}获取了h1的父级的整个高度和宽度。

我尝试在下面复制它，但这是不可能的。似乎h1的高度为零，因为边界不包围它。下面的代码有问题吗？

＆＃13;

section

＆＃13;

Answer 1

请将position:absolute; top:0; left:0;height:0;width: 100%;此css移至h1课程，您的问题已解决。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
    .main {
        background-color: blue;
        position: relative;
    }
    h1 {        
        border: 1px solid black;        
    }
</style>
<title>Page Title</title>
</head>
<body>
<section class="main">
    <h1>This is a Heading</h1>
</section>

</body>
</html>

＆＃13;

Answer 2

导致问题的position: relative不是position: absolute上h1设置的问题。
如果具有绝对定位的子元素的父容器没有设置明确的宽度和高度，它将崩溃。这是因为绝对定位的元素从文档的正常流程中取出。
为了解决您的问题，您可以在.main上明确设置高度/宽度。

为什么位置：相对使高度为零？

2 个答案: