我不明白为什么当我将position更改为relative时；脸书和脸书帮助你与生活中的人建立联系并分享"；位于页面顶部。我刚开始学习css三天。谢谢
这是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;
}
如果您需要对齐元素，请首先尝试flexbox(记住在父元素上添加flex以进行对齐)：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
在与flexbox进行了一些斗争之后，尝试与grid保持一致：https://www.w3schools.com/css/css_grid.asp
FLEXBOX X网格：
Flexbox：单向对齐，以垂直居中对齐帖子列表中的所有元素
网格：双向对齐，通常用于构建页面的位置；页眉、页脚、菜单、正文"在FOOTER中，您可以使用flexbox，这是非常常见的
(乍一看很难，但总有一天会对你有意义：D)
这些属性(flexbox，grid..)是一种流体结构，其中一个HTML元素干扰/支持另一个，try-in"检查元件"；(在浏览器中)并播放以删除一些HTML节点，如DIVs、SPANs…并查看如何在屏幕中操作元素。
在这些元素中添加一个具有绝对位置的div(等于您创建的值)。并在检查元素(在浏览器中)中删除这些元素。您将理解元素位置"；把它放出去"；元件干扰阳极的结构。
position:absolute相对于其第一个非静态祖先元素定位元素。在这种情况下，具有类名"的CCD_；h1"；，包装这两个句子的是<body>元素作为祖先：这使您的div位于顶部。
小提示：避免将关键字作为类名，这可能会令人困惑。我会从切换到或
position: relative不能像绝对定位元素使用top、bottom、left或right那样对齐。相反，使用这些元素会根据它们相对于其他元素的位置来改变它们的位置。
由于DOM中没有其他元素，因此该元素将位于顶部。
position: absolute，这是我认为您之前使用的，忽略了所有其他元素。
如果您想给这个div一个偏移量，请使用marginCSS属性
(margin-top、margin-left、margin-bottom、margin-right)。
但是，如果不使用显示器(如display: flex或display: grid)，则无法为相对定位的图元提供顶部偏移
很抱歉我的第一个回答太仓促了，我希望这能澄清问题。