如何设置页面Heading而不影响侧边Navigationbar的位置？

1. 修复HTML结构问题 #

你的<h1 id="greeting">放在了<body>标签外部，这不符合HTML规范，会导致浏览器渲染异常，是布局混乱的根源之一。先将其移至<body>内部。

2. 为导航栏添加固定定位 #

要让导航栏固定在屏幕右上角，需为.navBar添加固定定位属性，同时调整层级避免被遮挡，优化高度设置：

• position: fixed：让元素脱离文档流，不再受其他元素布局影响
• top: 0 + right: 0：将导航栏锚定在右上角
• z-index: 999：确保导航栏处于页面最上层，不会被其他元素覆盖
• height: 100vh：让导航栏高度自适应视口，替代不合理的固定高度5000px

3. 调整标题位置（可选） #

若导航栏固定后遮挡了标题，可给#greeting添加上边距，避免内容重叠。

修改后的HTML代码 #

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">  
    </head>
    <body>
        <h1 id="greeting"> Hello </h1>
        <ul class="navBar">
            <li><a class="navLinks" href="about.html"> About me </a></li>
        </ul>
    </body>
</html>

修改后的CSS代码 #

@font-face {
    font-family: Terminal;
    src: url(Fonts/Terminal.ttf);
}

body {
    background-color: #333333;
}

#greeting {
    text-align:center;
    font-family: Terminal;
    margin-top: 20px; /* 可选：避免被导航栏遮挡 */
}

.navBar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: black;
    height: 100vh; /* 自适应视口高度 */
    position: fixed; /* 启用固定定位 */
    top: 0;
    right: 0;
    z-index: 999; /* 提升层级 */
}
  
.navLinks {
    display: block;
    color: lime;
    padding: 8px 16px;
    text-decoration: none;
    font-family: Terminal;
}
  
.navLinks:hover {
    background-color: lime;
    color: black;
}

* {
    padding: 0px;
    margin: 0px;
}

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