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

Question

我在表格中创建了缩略图和描述字段。缩略图有一个覆盖相邻文本但不覆盖相邻缩略图的跨度图像？？？ (所有内容都包含在#divSparesItem 中)我尝试按照其他讨论中的建议向 css 添加 z-index 和显示变体，但似乎没有任何方法可以解决问题。谁能帮忙？

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

可以看到issue here (单击 Benelli1 选项卡)。任何建议将不胜感激!

Answer 1

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

CSS:

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

这是一个 JSFiddle这表明它在所有主要浏览器中都能正常显示。我不得不将 css 弄乱一点，以便让 JSFiddle 正确显示 .thumbnail:hover span 选择器。

此外，虽然对 z-index 的概念性理解很简单，但如果您还没有阅读它的工作原理，那么实际将其用于文档中可能会有点挑战.如果 z-index 一直给您带来麻烦，那么我建议您通读我发送给您的链接中的不同页面 if z-index。您很快就会成为专业人士!