导航栏Logo无法移动、文字颜色不黑的技术求助

我来帮你排查并解决这两个问题，先梳理下代码里的关键问题：

一、Logo无法调整位置的原因及修复 #

你的代码里有几个布局错误导致Logo固定不动：

• HTML里的<nav id="top bar">是无效ID（包含空格），应该改为<nav id="topbar">，否则相关样式可能失效；
• #topnav用了position: relative加top: -1150px的负定位，这种方式会打乱正常文档流，让导航栏脱离布局上下文，Logo定位自然混乱；
• #logo的height: 600px设置过大，远超导航栏高度（100px），撑大了容器导致定位失效；
• HTML中img的height="162 pt"写法错误，单位和值之间不能有空格，且pt是印刷单位，网页建议用px/rem，更推荐用CSS控制图片尺寸而非HTML属性。

修正后的HTML结构 #

先简化层级，修复无效ID：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { margin: 0; }
</style>
<link href="edusolut.css" type="text/css" rel="stylesheet">
<title>Edusolut</title>
</head>
<body>
<div class="top"></div>
<!-- navbar-->
<nav id="topnav">
  <div id="logo">
    <img src="./logo2.png" alt="edusolut logo">
  </div>
  <div class="text">
    <a class="active" href="#top">Home</a>
    <a href="#news">Training</a>
    <a href="#contact">Contact</a>
    <a href="#about">Service</a>
  </div>
</nav>
<!-- end navbar-->
</body>
</html>

修正后的CSS样式 #

用Flex布局实现稳定的导航栏左右分布，去掉错误的负定位：

.top { 
  background-image: url("first-background-2.png"); 
  background-position: center; /* 背景图应该用background-position，不是object-position */
  background-repeat: no-repeat; 
  background-attachment: scroll; 
  background-size: cover; 
  padding-bottom: 300px; 
  height: 920px; 
}

#topnav { 
  background-color: white; 
  width: 100%; 
  height: 100px; 
  padding-top: 0; /* 之前的60缺少单位，这里按需调整，比如20px */
  opacity: 0.6; 
  position: relative; 
  /* 去掉top: -1150px，若要导航栏固定在顶部，用position: fixed更合理 */
  display: flex; /* Flex布局实现Logo和文字的左右分布 */
  align-items: center; /* 垂直居中对齐 */
  padding: 0 60px; /* 左右内边距，控制Logo和文字的左右位置 */
  box-sizing: border-box; /* 内边距不撑宽导航栏 */
}

#logo { 
  opacity: 0.8; 
  /* 去掉float、text-align、top/left，Flex布局自动处理位置 */
}

#logo img {
  height: 80px; /* 根据导航栏高度调整Logo大小，避免超出容器 */
  width: auto;
}

.text { 
  margin-left: auto; /* 让导航文字自动靠右 */
  font-size: 30px; 
  font-weight: bold; 
  word-spacing: 20px; 
}

二、导航文字无法变黑的原因及修复 #

之前的.text { color: black !important; }只作用在容器上，但<a>标签有浏览器默认的蓝色样式（color: blue），继承的颜色会被默认样式覆盖。需要直接给<a>标签设置颜色：

.text a {
  color: black !important; /* 覆盖浏览器默认的链接蓝色 */
  text-decoration: none; /* 可选：去掉链接下划线 */
}

额外小建议 #

• 尽量少用!important，优先通过CSS选择器优先级控制样式；
• 不要用负定位调整布局，容易导致混乱，推荐用Flex/Grid或margin/padding控制位置；
• CSS属性值必须加单位（除了0），比如padding-top: 60要改成padding-top: 60px，否则浏览器会忽略该属性。

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