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

したがって、ここで2つのスタッキングコンテキストを作成します。1つ目は、それを含むドキュメントルートスタッキングコンテキストですtable。もう1つは、絶対に配置されたものによって作成されspanますz-index。それを行ったら、次のように、他のスタッキングコンテキストの上にあることを確認するだけです。

CSS：

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

これは、すべての主要なブラウザで正しく表示されることを示すJSFiddleです。JSFiddleのセレクターを正しく表示するには、少しcss混乱させる必要がありました。.thumbnail:hover span

また、の概念を理解するのz-indexは簡単ですが、それがどのように機能するかを理解していない場合、実際にドキュメントで使用するのは少し難しいかもしれません。引き続き問題が発生する場合z-indexは、送信したリンクのさまざまなページをお読みになることをお勧めします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 に答える