本文详细探讨了在css布局中，特别是复杂结构如家谱树中，当鼠标悬停时浮窗图片被相邻元素遮挡的问题。通过深入解析css z-index属性的工作原理，我们提供了一种有效的解决方案，确保浮窗图片始终显示在最上层，避免内容被遮挡，提升用户体验。文章包含示例代码和使用z-index的关键注意事项。
CSS布局中浮窗图片遮挡问题解决方案：深入理解Z-index
在构建复杂的网页布局时，我们经常会遇到元素堆叠顺序的问题。尤其是在实现交互式效果，例如鼠标悬停时显示浮窗图片（popup image）时，如果布局不当，这些浮窗可能会被相邻的元素遮挡，导致内容不可见或用户体验受损。本教程将以一个家谱树（family tree）的案例为例，深入探讨此类问题，并提供基于CSS z-index属性的解决方案。
理解元素堆叠上下文与Z-index
在CSS中，元素在三维空间中的堆叠顺序由堆叠上下文（Stacking Context）和 z-index 属性共同决定。
-
堆叠上下文（Stacking Context）：是一个HTML元素的三维概念，它在Z轴（深度）上相对于其他元素进行定位。当一个元素创建了一个新的堆叠上下文时，它的所有子元素都会在这个新的上下文中进行堆叠，并且这个上下文的堆叠顺序由其父级堆叠上下文决定。常见的创建堆叠上下文的方式包括：
- 根元素 <html>。
- position 属性值为 absolute, relative, fixed, sticky 且 z-index 值不为 auto 的元素。
- opacity 属性值小于1的元素。
- transform, filter, perspective 等CSS属性值不为 none 的元素。
- 以及其他一些CSS属性。
-
z-index 属性：用于指定一个定位元素（即 position 属性值不为 static 的元素）在堆叠上下文中的堆叠顺序。z-index 值越大，元素在Z轴上就越靠近用户，即会显示在其他元素的上方。
立即学习“前端免费学习笔记（深入）”；
重要提示：z-index 属性只对已定位的元素（position 属性值为 relative, absolute, fixed, 或 sticky）有效。对于 position: static 的元素，设置 z-index 不会产生任何效果。
问题场景：家谱树中的浮窗图片遮挡
假设我们正在构建一个家谱树，每个“人物”块（.person）在鼠标悬停时会显示一张相关的图片。在以下HTML和CSS结构中，我们使用 display: flex 或 display: table-cell 来布局家谱树的节点，并利用 position: absolute 和 opacity 实现图片浮窗效果。
<DIV class="tree">
<UL>
<LI>
<DIV class="person child male">
<DIV class="content">
<DIV class="Positioning">
<SPAN class="ImgHover" style="background-color: LightSteelBlue">
<!-- 其他内容 -->
<IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;">
</SPAN>
</DIV>
</DIV>
</DIV>
<UL>
<LI>
<DIV class="person child male">
<DIV class="content">
<DIV class="Positioning">
<SPAN class="ImgHover" style="background-color: LightSteelBlue">
<!-- 其他内容 -->
<IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;">
</SPAN>
</DIV>
</DIV>
</DIV>
</LI>
<LI>
<DIV class="person child female">
<DIV class="content">
<DIV class="Positioning">
<SPAN class="ImgHover" style="background-color: #FFCCFF ">
<!-- 其他内容 -->
<IMG SRC="http://placehold.it/64/64" style="height:100px; ; border-radius: 40%;">
</SPAN>
</DIV>
</DIV>
</DIV>
</LI>
<!-- 更多LI元素 -->
</UL>
</LI>
</UL>
</DIV>相关的CSS样式片段如下：
/* Tree */
.tree ul li ul {
display: flex; /* 导致同级LI元素并排显示 */
justify-content: center;
position: relative;
padding: 20px 0 0 0;
}
.tree li {
display: table-cell; /* 另一种并排显示的方式 */
position: relative;
/* ... 其他样式 ... */
}
/* Image on hovering for tree leaf */
.content span.ImgHover {
display: block;
position: relative; /* 为内部绝对定位的图片提供定位上下文 */
}
.content span.ImgHover img {
position: absolute; /* 绝对定位的图片 */
display: inherit;
right: -130px;
top: 0px;
opacity: 0;
transition-property: opacity;
transition-duration: 2s;
/* 缺少 z-index 属性 */
}
.content span.ImgHover:hover img {
display: inherit;
top: 0px;
opacity: 1;
}在上述结构中，当鼠标悬停在左侧的“人物”块上时，弹出的图片（IMG元素）可能会被其右侧的同级“人物”块遮挡。这是因为默认情况下，在同一个堆叠上下文中，后出现的元素会覆盖先出现的元素。虽然 IMG 元素是 position: absolute，但它与其父级 LI 元素处于相同的堆叠上下文中，并且其右侧的 LI 元素（及其内容）在HTML结构中位于其后，因此会覆盖它。
解决方案：应用Z-index
要解决这个问题，我们需要明确地告诉浏览器，当图片浮窗出现时，它应该显示
