CSS设置position:relative时元素跑到页面顶部是什么原因

CSS学习过程中遇到定位异常：将class为h1的div的position属性从absolute修改为relative时，内部包含facebook标题及介绍文本的区块会直接显示在页面顶部，相关代码如下：

HTML代码 #

<!DOCTYPE html>
<html>
 
<head>
<link rel="stylesheet" href="henry.css">
</head>
 
<body>
    <div class="h1">
        <h1 class="h">facebook</h1>
        <p class="pr">Facebook helps you connect and share with the people in your life.</p>
        </div>
</body>
 
</html>

CSS代码 #

.h1{
    position: absolute;
    left: 10%;
    top: 40%;
    width: 550px;
}

• 两种定位模式的核心渲染逻辑存在本质差异：
  • position: absolute会让元素脱离正常文档流，当元素不存在设置了非static定位的祖先元素时，它的top/left偏移值会相对于浏览器视口计算。视口本身有固定的可视高度，因此代码中设置的top: 40%、left:10%可以正常计算出偏移距离，元素会出现在距离视口顶部40%、左侧10%的位置，不会贴在页面顶部。
  • position: relative不会让元素脱离正常文档流，元素始终占据正常文档流的原有位置，top/left偏移是相对于自身在正常文档流中的默认位置计算，且百分比形式的偏移值要求参照对象有明确的可计算尺寸才能生效。
• 元素贴顶的直接触发逻辑：现有代码没有给html、body标签设置明确高度，这两个标签的默认高度由内部内容撑开，没有固定的可参考计算值。当div改成relative定位时，top:40%因为没有可参照的计算基数，偏移规则失效；而这个div本身是body的第一个子元素，在正常文档流中的默认位置就是紧贴页面顶部，最终就呈现出修改定位后区块跑到页面顶部的效果。

给CSS补充如下规则，给根节点和body设置和视口一致的明确高度：

html, body {
  height: 100%;
  margin: 0;
}

补充规则后再将div的定位改为relative，top:40%的偏移就能正常计算生效，元素不会再贴在页面顶部。

内容的提问来源于stack exchange，提问作者henry