跨度图像叠加文本但不包含其他图像

我在表格中创建了缩略图和说明字段。缩略图具有覆盖相邻文本但不包含相邻缩略图的跨度图像？（所有都包含在#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选项卡上）。任何意见将不胜感激！

来源

2012-10-29 Hansel

你不应该真的在这个布局中使用表格 - 你应该简单地使用DIV等标签。 HTML表格实际上只是为了显示表格数据。 –

所以你想要做的是在这里做两个stacking contexts。第一个是文档根目录堆栈上下文，其中包含table。一旦我们给它一个z-index，另一个将由绝对定位的span创建。一旦我们做到这一点，我们需要做的是确保它在其它堆叠上下文的顶部，就像这样：

CSS：

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

这里有一个JSFiddle，显示它在所有主要的正常显示浏览器。我不得不搞糟css为.thumbnail:hover span选择器为JSFiddle正确显示。

另外，虽然z-index的概念性理解是不容易的，但实际上将其用于文档中可能会有点具有挑战性，如果您还没有阅读它的工作原理。如果z-index不断给您造成麻烦，那么我建议您通读我发给您的链接上的不同页面，如果z-index。你很快就会成为一名职业球员！

来源

2012-10-29 15:43:50 jmeas

哈哈感谢jmeas＆Kraz，我迫切希望所有人都坚持z-index，这让我对这个简单问题感到非常头疼。现在完美工作，再次感谢，你们摇滚！ – Hansel

取下.thumbnails的Z-index：

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

只是不要到处添加的z-index。 :)

来源

2012-10-29 17:04:22 Kraz

跨度图像叠加文本但不包含其他图像

回答

相关问题