HTML开发中body标签内容错位显示在header左上角的问题排查

• HTML 结构非法：你把整个 <header> 块直接放在 <body> 标签外侧、<head> 标签之后。按照 HTML 规范，所有可见页面内容（header、正文、导航等）必须全部嵌套在 <body> 内部，浏览器碰到这种不符合规则的结构会自动调整 DOM 层级做容错渲染，直接打乱页面正常文档流排布。
• 定位参考错误：.title 设置了 position: absolute 脱离正常文档流，但没有给它的父容器添加非 static 的定位属性。这种情况下绝对定位元素会跳过所有父级，直接以根 <html> 元素作为偏移参考点，加上你设置的 top:0; left:0，再叠加前面的结构乱层问题，后续 body 内的正常流元素就会被挤到错误位置，视觉上看起来就像全部错位到了 header 的左上角。

1. 修正 HTML 嵌套层级 #

把 <header> 整块移入 <body> 内部，顺便修正原本写反的列表嵌套逻辑（之前你把 <a> 标签套在 <li> 外面，不符合语义化规范）。另外你引入谷歌字体时漏写了 rel="stylesheet"，不补的话字体无法正常加载：

<!DOCTYPE html>
<html>
    <head>
        <link href="flex.css" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@500" rel="stylesheet">
    </head>
    <body>
        <header>
            <div id="header">
                <h1 class="title">brookfield corp</h1>
                <nav class="top-nav">
                    <ul>
                        <li><a href="#recent">recent</a></li>
                        <li><a href="#samples">samples</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <h2>recent</h2>
    </body>
</html>

2. 调整样式定位逻辑 #

给 .title 的父容器 #header 添加 position: relative，把绝对定位的参考范围锁定在 header 内部，避免元素直接漂移到整个页面的根节点参考系中。原导航使用的 float:right 容易和绝对定位的标题抢空间，换成绝对定位加右偏移的写法更稳定：

html {
    box-sizing: border-box;
}

#header {
    position: relative;
}

.title {
    font-family: 'Frank Ruhl Libre', serif;
    text-align: center;
    font-size: 4em;
    background-color: hsla(140, 50%, 30%, .9);
    color:cornsilk; 
    padding: 30px 0px 30px 0px;
    margin: 0 auto;
    height: 100px;
    width: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
}

nav {
    font-family: 'Frank Ruhl Libre', serif;
    position: absolute;
    right: 20px;
    top: 40px;
    text-decoration: none;
}

li {
    color: black;
    list-style: none;
    display: inline;
    opacity: .7;
    text-decoration: none;
}

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