Question

我在表格中创建了缩略图和说明字段。缩略图有一个跨度图像，它覆盖相邻的文本但不是相邻的缩略图??? （所有都包含在#divSparesItem中）我尝试按照其他讨论中的建议添加z-index并显示变量给css，但似乎没有什么能解决这个问题。有人可以帮忙吗？

HTML：

            <table>
                <tr>
                    <td><a class="thumbnail" href="#thumb"><img src="Design/Spares Image Thumbnail.png" width="80" height="60" alt="Spare I"/><span><img src="Design/Spares Image Large.png" width="320" height="240" alt="Spare I"/><br/>Spare I</span></a><p>CODE: 123ABC<br/>Description: Donec egestas justo ut nulla congue bibendum.<br/><font color="#FF0000">Price</font></p></td>
                    <td><a class="thumbnail" href="#thumb"><img src="Design/Spares Image Thumbnail.png" width="80" height="60" alt="Spare I"/><span><img src="Design/Spares Image Large.png" width="320" height="240" alt="Spare II"/><br/>Spare II</span></a><p>CODE: 123ABC<br/>Description: Donec egestas justo ut nulla congue bibendum.<br/><font color="#FF0000">Price</font></p></td>
                    <td><a class="thumbnail" href="#thumb"><img src="Design/Spares Image Thumbnail.png" width="80" height="60" alt="Spare III"/><span><img src="Design/Spares Image Large.png" width="320" height="240" alt="Spare I"/><br/>Spare III</span></a><p>CODE: 123ABC<br/>Description: Donec egestas justo ut nulla congue bibendum.<br/><font color="#FF0000">Price</font></p></td>
                </tr>
            </table>

CSS：

#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;
}

您可以看到问题here（点击Benelli1标签）。任何建议将不胜感激！

Answer 1

所以你想要做的就是在这里制作两个stacking contexts。第一个是文档根堆叠上下文，其中包含table。一旦我们给它span，另一个将由绝对定位的z-index创建。一旦我们这样做，我们需要做的就是确保它在其他堆叠上下文之上，如下所示：

CSS：

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

这是一个JSFiddle，显示它在所有主流浏览器中都能正常显示。我不得不为css选择器弄乱.thumbnail:hover span以使JSFiddle正确显示。

此外，虽然对z-index的概念性理解是明智的，但实际上将其用于文档中可能会有点挑战，如果你还没有读到它的工作方式。如果z-index一直给您带来麻烦，那么我建议您仔细阅读我发送给您的链接上的不同页面z-index。你很快就会成为职业选手！

Answer 2

从.thumbnails中删除z-index：

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

只是不要在任何地方添加z-index。：）

跨度图像覆盖文本但不覆盖其他图像

2 个答案: