Css Span image覆盖文本，但不覆盖其他图像

我在一个表中创建了一个缩略图和描述字段。缩略图具有覆盖相邻文本但不覆盖相邻缩略图的跨距图像？？？（所有内容都包含在#divSparesItem中）我曾尝试按照其他讨论中的建议将z-index和display变体添加到css中，但似乎没有解决问题。有人能帮忙吗

HTML:

---

您可以看到问题（单击Benelli1选项卡）。任何建议都将不胜感激

所以你要做的是在这里做两个。第一个是文档根堆栈上下文，其中包含

表

。另一个将由绝对定位的

span

创建，只要我们给它一个

z-index

。一旦我们这样做了，我们需要做的就是确保它位于其他堆栈上下文之上，如下所示：

CSS:

下面是一个示例，显示它在所有主要浏览器中正确显示。我不得不把

css

搞得一团糟，才能让

缩略图：悬停span

选择器正确显示JSFIDLE

---

此外，虽然对

z-index

的概念性理解是不需要动脑筋的，但如果您还没有阅读它的工作原理，那么在文档中实际使用它可能会有点困难。如果

z-index

一直给您带来麻烦，那么我建议您仔细阅读我在

z-index

中发送给您的链接上的不同页面。你很快就会成为职业选手

从中删除z索引。缩略图：

.thumbnail {
    position: relative;
    /*z-index: 25;*/
}

---

只是不要到处添加z索引。：）

您不应该在这个布局中使用表——您应该简单地使用诸如div之类的标记。HTML表格实际上只是用来显示表格数据的。哈哈，感谢jmeas和Kraz，我急于强迫所有东西都遵守z索引，这让我为这么简单的问题感到非常头疼。现在很好用了，再次感谢你们，你们棒极了！

#divSparesItem {
    color:#CCC;
    text-align:left;
    font-size:0.8em;
    float:right;
    padding-top:10px;
    padding-left:25px;
    padding-right:25px;
    text-decoration:none;
}

#divSparesItem img {
    float:left;
    margin-top:2px;
    margin-right:15px;
    margin-bottom:10px;
    border-left:#000;
    border-top:#000;
    border-right:#999;
    border-bottom:#999;
    border-width:1px;
    border-style:solid;
}

.thumbnail {
    position:relative;
    z-index:0;
}

.thumbnail span{
    position:absolute;
    background-color:#333;
    padding-top:15px;
    padding-left:15px;
    padding-right:0px;
    padding-bottom:15px;
    border-left:#999;
    border-top:#999;
    border-right:#000;
    border-bottom:#000;
    border-width:1px;
    border-style:solid;
    visibility:hidden;
    color:#CCC;
    text-decoration:none;
}

.thumbnail span img{
    border:none;
    z-index:100;
}

.thumbnail:hover span{
    display:block;
    visibility:visible;
    background-color:#333;
    top:-115px;
    left:0;
}

.thumbnail:hover span {
    ...
    z-index: 1;
}

.thumbnail {
    position: relative;
    /*z-index: 25;*/
}