Html 如何强制图像工具提示显示在其他工具提示之上？

我有一个CSS图像工具提示，当鼠标悬停时，它会显示另一个大图像工具提示

现在，当我悬停并且在工具提示附近有另一个工具提示（小）图像时，我得到了这个结果：

如您所见，大工具提示显示在第二个工具提示（小）图像的下方

我想强制它在那个小工具提示上方显示

以下是HTML代码：

.maptt{
左边距：350px；
文本对齐：居中；
边缘顶端：97px；
z指数：200；
位置：绝对位置；
}
.maptlish{
左边距：450px；
文本对齐：居中；
利润上限：197px；
z指数：200；
位置：绝对位置；
}
/*新刀尖*/
a、 工具提示1{
大纲：无；
}
a、 工具提示1强{
线高：30px；
}
a、 工具提示1：悬停{
文字装饰：无；
}
a、 工具提示1跨度{
z指数：10；
显示：无；
填充：14px 20px；
利润上限：-30px；
左边距：28px；
宽度：300px；
线高：16px；
}
a、 工具提示1：悬停范围{
显示：内联；
位置：绝对位置；
颜色：#111；
边框：1px实心#DCA；
背景#fffAF0；
}
.标注{
z指数：20；
位置：绝对位置；
顶部：30px；
边界：0；
左-12px；
}
/*CSS3额外服务*/
a、 工具提示1跨度{
边界半径：4px；
盒影：5px 5px 8px#CCC；
}

---

这看起来像是一个

z-index

问题。将右侧的

z-index

添加到

a。工具提示1：悬停span

并将

z-index

自动添加到

。maptt

：

a.tooltip1 span,
a.tooltip1:hover span {
  z-index: 9999;
}
.maptt {
  z-index: auto;
}

预览

小提琴：