1

liがフロートするリスト（ul --li）があるので、ブロックのあるグリッドがあります。すべてのliには相対的な位置があります。

すべてのliの中に、非表示になっているdiv（クラス'more'）があり、親liにカーソルを合わせた場合にのみ表示されます。.more divアタッチしたいのは、liの下部にあるSTARTINGを下に移動し、他のliを押し下げずに他のliをオーバーラップすることです。下部に取り付けられているため、.more divの下部の位置を、moredivの正確な高さに一致する負の値に設定しました。

これは多かれ少なかれ機能しますが、.moredivは常に他のliの下に表示されます。親と重なっているだけです。

私はすでにすべてのliに5の静的z-indexを与え、すべての.more divに500の静的z-indexを与えようとしましたが、それでも役に立ちません。

そのすべてのjsFiddleを作成しました：http：//jsfiddle.net/yNS6R/

関連コード：

    ul li
    {
        background: yellow;
        border: 1px solid green;
        float: left;
        height: 200px;
        margin: 0 10px 10px 0;
        position: relative;
        width: 22%;
        z-index: 2;
    }

    ul li .more
    {
        background: red;
        border-bottom: 1px solid green;
        border-left: 1px solid green;
        border-right: 1px solid green;
        bottom: -50px;
        display: none;
        height: 50px;
        left: -1px;
        position: absolute;
        width: 100%;
        z-index: 500;
    }

    ul li:hover .more
    {
        display: block;
    }
4

2 に答える 2

1

andから削除z-indexし、状態に追加します。ul liul li .more:hover

ul li:hover .more {             
   display: block;
   z-index: 1;
}

更新されたjsfiddle

于 2013-02-05T10:07:51.933 に答える
0

これは、li に z-index を追加したためです。li の z-index を削除すると、正常に動作します。

ul li
{
    background: yellow;
    border: 1px solid green;
    float: left;
    height: 200px;
    margin: 0 10px 10px 0;
    position: relative;
    width: 22%;
    z-index: 2; // here you add z-index to li
}
于 2013-02-05T10:09:44.960 に答える