为何页面文本显示在导航栏后方？HTML/CSS问题求助

首先，你犯了一个新手很容易踩的HTML结构坑——把<nav>标签放在了<head>里面！<head>是用来存页面元数据（比如字符编码、标题、样式引用）的，所有可见的页面内容（导航栏、标题、文本这类）都必须放在<body>标签内部，这是HTML的核心规范，也是导致你布局混乱的首要原因。

另外，大概率你的style.css里给导航栏加了position: absolute或者position: fixed定位，这种定位会让导航栏脱离正常的文档流，后面的元素（比如你的<h1>）会自动填充它原来的位置，所以才会跑到导航栏后方的左上角。

下面给你具体的修正步骤：

1. 先修正HTML结构 #

把<nav>移到<body>内部，放在<h1>之前，同时还帮你修正了脚本引用的错误写法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="language" content="swedish">
    <meta http-equiv="content-type" content="text/html">
    <title> Kontakt </title>
    <link rel="stylesheet" href="style.css">
    <!-- 修正脚本引用：script标签用src属性，不是rel=script -->
    <script src="script.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@200&display=swap" rel="stylesheet">
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">Hem</a></li>
            <li><a href="jag.html">Vem är jag?</a></li>
            <li><a href="projekt.html">Mina projekt</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
        </ul>
    </nav>
    <h1>hej</h1>
</body>
</html>

2. 调整CSS布局（两种常用方案） #

方案一：如果要做固定在顶部的导航栏 #

固定定位的导航栏会一直停留在页面顶部，这时候给<body>加个padding-top，值等于导航栏的高度，就能避免内容被遮挡：

/* 先重置浏览器默认的内外边距，避免样式干扰 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff; /* 加背景色，防止后面内容透过显示 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 可选：加阴影增强视觉效果 */
}

nav ul {
    list-style: none;
    display: flex; /* 让导航项横向排列 */
    padding: 1rem; /* 给导航栏加内边距，内容不挤边 */
}

nav ul li {
    margin-right: 2rem;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-family: 'Mulish', sans-serif;
}

/* 给body加顶部内边距，值等于导航栏高度 */
body {
    padding-top: 4rem;
    font-family: 'Mulish', sans-serif;
}

方案二：让导航栏处于正常文档流 #

如果不需要导航栏固定，只需要它正常占据页面顶部空间，后续内容自然会排在下方，不用手动调margin：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

nav ul {
    list-style: none;
    display: flex;
    padding: 1rem;
}

nav ul li {
    margin-right: 2rem;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-family: 'Mulish', sans-serif;
}

body {
    font-family: 'Mulish', sans-serif;
    padding: 0 1rem; /* 可选：让内容不贴页面左右边缘 */
}

h1 {
    margin-top: 2rem; /* 可选：给标题加个上边距，和导航栏拉开距离 */
}

这样调整后，你的<h1>就会正常出现在导航栏下方，不用再靠手动加margin来调整位置啦。

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