HTML/CSS导航按钮hover时页面元素移位问题求助（新手）

问题描述 #

我是HTML和CSS新手，当前遇到问题：鼠标悬停在顶部Home、About、Services等导航按钮时，页面其余元素会发生移位。尝试为导航按钮设置position:absolute，结果导致按钮重叠；为末尾按钮设置absolute或fixed，既未解决问题还破坏了布局对齐。

问题截图 #

原代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @font-face {
      font-family: title;
      src: url(Modern\ Age.ttf);
    }
    @font-face {
      font-family: body;
      src: url(modern\ M.ttf);
    }
    body {
      background: black; /* 添加黑色背景是为了更清楚地展示问题 */
      background-image: url(ezgif.com-webp-to-jpg.jpg);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
    }
    nav>h2 {
      color: white;
      font-family: Title;
      font-weight: bold;
      font-size: 30px;
      margin-left: 20px;
      display: inline-block;
    }
    .cn {
      color: white;
      border: none;
      background-color: rgb(255, 255, 255, 0);
      cursor: pointer;
      display: inline-flex;
      margin-left: 55px;
    }
    .cn:hover {
      color: black;
      font-weight: bold;
      background-color: white;
      height: 35px;
      width: 90px;
      border: none;
      border-radius: 10px;
      transition: all 1s;
      display: inline;
      margin-right: 0;
    }
    #hm {
      border-left: 55px;
    }
    #lg {
      background-color: white;
      color: black;
      font-family: title;
      height: 35px;
      width: 75px;
      border: none;
      border-radius: 5px;
      font-weight: 500;
      cursor: pointer;
      margin-left: 125px;
    }
    #rg {
      background-color: white;
      color: black;
      font-family: title;
      height: 35px;
      width: 75px;
      border: none;
      border-radius: 5px;
      font-weight: 500;
      cursor: pointer;
      margin: 20px;
    }
    #lg:hover {
      color: white;
      background-color: rgb(233, 143, 69);
      transition: 0.5s;
    }
    #rg:hover {
      color: white;
      background-color: rgb(233, 143, 69);
      transition: 0.5s;
    }
    #head {
      color: white;
      font-family: title;
      margin-left: 45px;
      font-weight: bolder;
      font-size: 65px;
    }
    #body {
      color: white;
      text-align: justify;
      font-family: body;
      font-weight: 100;
      font-size: 20px;
      margin-left: 45px;
    }
    #fn {
      color: black;
      background-color: white;
      height: 55px;
      width: 200px;
      border: none;
      border-radius: 25px;
      font-family: title;
      font-weight: bold;
      font-size: 20px;
      margin-left: 45px;
      cursor: pointer;
    }
    #fn:hover {
      color: white;
      background-color: rgb(233, 143, 69);
      transition: 0.5s;
    }
  </style>
</head>
<body>
  <div>
    <nav>
      <h2>LAN Network Provider</h2>
      <button class="cn" id="hm">Home</button>
      <button class="cn">About</button>
      <button class="cn">Services</button>
      <button class="cn">Contact</button>
      <button id="lg" class="bt">Login</button>
      <button id="rg" class="bt">Register</button>
    </nav>
  </div>
  <div class="text">
    <h1 id="head">Hello,<br>It's&nbspme &nbsp Net- Manger</h1>
    <pre id="body">
I help create and manage fast and effective
LAN networks with easy and intuitive managements 
systems and training for staff
        </pre>
  </div>
  <button id="fn">GET A QUOTE</button>
</body>
</html>

问题原因 #

移位的核心是：你在导航按钮的hover状态中修改了盒模型核心属性——原本的.cn没有固定宽高，hover时突然设置height:35px、width:90px，还把display从inline-flex改成inline，同时调整了margin。这些变化会让元素占据的空间突然改变，触发页面重排，导致周围元素移位。

解决方法 #

1. 给导航按钮设置固定基础尺寸 #

让按钮在常态和hover状态下占据相同空间，避免尺寸突变：

.cn {
  /* 原有属性保留，新增以下内容 */
  width: 90px; /* 和hover状态的宽度一致 */
  height: 35px; /* 和hover状态的高度一致 */
  border-radius: 10px; /* 提前设置圆角，避免hover时圆角突变 */
  display: inline-flex;
  align-items: center; /* 文字垂直居中 */
  justify-content: center; /* 文字水平居中 */
}

2. 简化hover状态样式 #

hover时只修改视觉样式，不碰盒模型属性：

.cn:hover {
  color: black;
  font-weight: bold;
  background-color: white;
  transition: all 1s;
  /* 移除height、width、display、margin-right这些会改变布局的属性 */
}

3. 优化导航布局（可选但推荐） #

用Flex布局重构导航，让元素对齐更稳定，间距更易维护：

nav {
  display: flex;
  align-items: center;
  gap: 55px; /* 用gap统一控制导航元素间距，替代零散的margin */
}
nav>h2 {
  margin-left: 20px;
  /* 移除inline-block，Flex布局下不需要 */
}
#hm {
  /* 移除border-left:55px;改用gap控制间距 */
}
#lg {
  margin-left: auto; /* 让登录注册按钮自动靠右 */
  margin-right: 20px;
}
#rg {
  margin-right: 20px;
  margin-left: 0; /* 清除原有margin，避免间距混乱 */
}

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    @font-face {
      font-family: title;
      src: url(Modern\ Age.ttf);
    }
    @font-face {
      font-family: body;
      src: url(modern\ M.ttf);
    }
    body {
      background: black; /* 添加黑色背景是为了更清楚地展示问题 */
      background-image: url(ezgif.com-webp-to-jpg.jpg);
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
    }
    nav {
      display: flex;
      align-items: center;
      gap: 55px;
    }
    nav>h2 {
      color: white;
      font-family: Title;
      font-weight: bold;
      font-size: 30px;
      margin-left: 20px;
    }
    .cn {
      color: white;
      border: none;
      background-color: rgba(255, 255, 255, 0);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 90px;
      height: 35px;
      border-radius: 10px;
    }
    .cn:hover {
      color: black;
      font-weight: bold;
      background-color: white;
      transition: all 1s;
    }
    #lg {
      background-color: white;
      color: black;
      font-family: title;
      height: 35px;
      width: 75px;
      border: none;
      border-radius: 5px;
      font-weight: 500;
      cursor: pointer;
      margin-left: auto;
      margin-right: 20px;
    }
    #rg {
      background-color: white;
      color: black;
      font-family: title;
      height: 35px;
      width: 75px;
      border: none;
      border-radius: 5px;
      font-weight: 500;
      cursor: pointer;
      margin-right: 20px;
    }
    #lg:hover {
      color: white;
      background-color: rgb(233, 143, 69);
      transition: 0.5s;
    }
    #rg:hover {
      color: white;
      background-color: rgb(233, 143, 69);
      transition: 0.5s;
    }
    #head {
      color: white;
      font-family: title;
      margin-left: 45px;
      font-weight: bolder;
      font-size: 65px;
    }
    #body {
      color: white;
      text-align: justify;
      font-family: body;
      font-weight: 100;
      font-size: 20px;
      margin-left: 45px;
    }
    #fn {
      color: black;
      background-color: white;
      height: 55px;
      width: 200px;
      border: none;
      border-radius: 25px;
      font-family: title;
      font-weight: bold;
      font-size: 20px;
      margin-left: 45px;
      cursor: pointer;
    }
    #fn:hover {
      color: white;
      background-color: rgb(233, 143, 69);
      transition: 0.5s;
    }
  </style>
</head>
<body>
  <div>
    <nav>
      <h2>LAN Network Provider</h2>
      <button class="cn" id="hm">Home</button>
      <button class="cn">About</button>
      <button class="cn">Services</button>
      <button class="cn">Contact</button>
      <button id="lg" class="bt">Login</button>
      <button id="rg" class="bt">Register</button>
    </nav>
  </div>
  <div class="text">
    <h1 id="head">Hello,<br>It's&nbspme &nbsp Net- Manger</h1>
    <pre id="body">
I help create and manage fast and effective
LAN networks with easy and intuitive managements 
systems and training for staff
        </pre>
  </div>
  <button id="fn">GET A QUOTE</button>
</body>
</html>

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