HTML水平顶部按钮hover时<li>移位问题求解决方案（禁用position fixed）

解决方案思路 #

核心是保持原<li>元素的布局占位不变，通过不影响文档流的方式实现hover视觉效果，以下是几种可行方案：

方案1：用伪元素承载hover效果

利用绝对定位的伪元素实现hover时的视觉变化，伪元素的变换不会改变原<li>的盒模型尺寸，因此不会干扰相邻元素的位置。

<ul class="nav">
  <li>首页</li>
  <li>产品</li>
  <li>关于我们</li>
  <li>联系我们</li>
</ul>

.nav {
  list-style: none;
  padding: 0;
  display: flex;
}

.nav li {
  position: relative;
  padding: 10px 20px;
  background: #f0f0f0;
  cursor: pointer;
  flex-shrink: 0; /* 防止元素被压缩 */
}

/* 伪元素承载hover效果 */
.nav li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ccc;
  z-index: -1;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.nav li:hover::before {
  transform: scale(1.05); /* 缩放效果，可替换为颜色、阴影等 */
}

方案2：提前占位避免尺寸变化

如果hover效果是边框、背景这类样式，可以提前设置占位属性，hover时仅修改属性值而非新增尺寸。

.nav li {
  padding: 10px 20px;
  background: #f0f0f0;
  cursor: pointer;
  flex-shrink: 0;
  /* 提前设置透明边框占位 */
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.nav li:hover {
  border-color: #2c3e50; /* 仅修改边框颜色，不改变元素尺寸 */
}

方案3：使用transform属性（不改变占位）

transform属性的变换（如缩放、平移）不会改变元素在文档流中的占位空间，因此不会导致相邻元素位移。

.nav li {
  padding: 10px 20px;
  background: #f0f0f0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.nav li:hover {
  transform: scale(1.05);
  transform-origin: center;
}

注意事项 #

• 若使用缩放类效果，需确保hover元素不会超出父容器遮挡其他内容，可适当调整父容器的overflow属性或缩放比例
• 保持flex-shrink: 0可以防止flex布局下元素被挤压变形

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