悬停元素重叠问题求助——荷兰语控制面板开发故障排查

嘿，我来帮你捋捋这个悬停覆盖的问题！你遇到的核心问题大概率是定位上下文混乱和堆叠顺序没理清导致的，咱们一步步来解决：

1. 先搞清楚问题根源 #

你用了position:absolute/relative但没给每个悬停元素设置独立的定位容器，导致geen afspraak的悬停内容脱离了自己的触发区域，乱跑覆盖到其他文本；另外如果没给悬停内容加不透明背景，就算位置对了，也会透过它看到下面的内容，看起来像是被覆盖。

2. 具体解决方案 #

第一步：给每个悬停项加独立的定位容器 #

给CV和geen afspraak各自套一个父容器，设置position: relative，这样里面的悬停内容（用position:absolute）就会相对于这个父容器定位，不会跑到其他元素的地盘里。

示例HTML结构：

<div class="control_panel">
  <!-- CV 悬停项 -->
  <div class="hover-trigger">
    <span>CV</span>
    <div class="hover-popup">这里是CV的详细内容...</div>
  </div>

  <!-- geen afspraak 悬停项 -->
  <div class="hover-trigger">
    <span>geen afspraak</span>
    <div class="hover-popup">这里是geen afspraak的详细内容...</div>
  </div>
</div>

第二步：调整CSS样式，规范定位和堆叠 #

.control_panel {
  /* 保留你原有的背景等样式 */
  /* 建议不要给整个control_panel设absolute，除非你明确需要它脱离文档流 */
  position: relative; /* 如果需要的话，保持它作为外层容器的定位上下文 */
}

.hover-trigger {
  position: relative; /* 关键：给每个触发项创建独立的定位上下文 */
  display: inline-block; /* 让容器只占自身内容宽度，避免两个项互相挤压 */
  margin: 0 15px; /* 给两个项之间留足够间距，防止悬停内容挨太近 */
  cursor: pointer; /* 提示用户这是可悬停元素 */
}

.hover-popup {
  position: absolute;
  top: calc(100% + 5px); /* 放在触发元素的下方，加5px间距避免紧贴 */
  left: 0;
  background-color: #fff; /* 必须加不透明背景！不然会透过它看到下面的文本 */
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 加个阴影提升层次感 */
  z-index: 10; /* 确保悬停内容在其他文本的上层 */
  display: none; /* 默认隐藏 */
  min-width: 200px; /* 可以设置最小宽度，避免内容太挤 */
}

/* 悬停时显示弹窗 */
.hover-trigger:hover .hover-popup {
  display: block;
}

第三步：排查额外可能的问题 #

• 如果你的control_panel本身设置了position:absolute，要确保它的父容器有position:relative，不然它会相对于整个页面定位，可能导致内部元素布局混乱。
• 如果还是有覆盖，检查两个hover-popup的z-index，可以给需要优先显示的那个设更高的数值（比如11），不过只要定位上下文正确，一般不需要这么做。

3. 效果验证 #

这样设置后，每个悬停内容都会乖乖待在自己触发元素的下方，不会乱跑覆盖其他文本，而且有不透明背景，内容也能清晰阅读。

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