3

我在表格中创建了缩略图和描述字段。缩略图具有覆盖相邻文本但不覆盖相邻缩略图的跨度图像？？？（所有内容都包含在#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;
}

您可以在此处查看问题（单击 Benelli1 选项卡）。任何建议将不胜感激！

4

2 回答 2

1

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

CSS：

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

这是一个JSFiddle，它显示它在所有主要浏览器中都正确显示。我不得不弄乱JSFiddlecss的选择器才能正确显示。.thumbnail:hover span

此外，虽然概念上的理解z-index是显而易见的，但如果您还没有阅读过它的工作原理，那么将其实际应用到文档中可能会有点挑战。如果z-index一直给您带来麻烦，那么我建议您阅读我发送给您的链接上的不同页面 if z-index。您很快就会成为专业人士！

于 2012-10-29T15:43:50.173 回答
1

从 .thumbnails 中删除 z-index：

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

只是不要在任何地方添加 z-index 。:)

于 2012-10-29T17:04:22.403 回答