html - 表のセル内にある場合の CSS の z-index の問題

Question

毎日カーソルを合わせると、各セルの下に絶対位置にある小さなポップアップが表示されるカレンダー/テーブルがあります。

これを機能させるために、<div style="relative" />各セル内に a を追加しました。FF では正常に動作しますが、IE でホバーすると z-index は無視されます。

IE 7 + 8で動作させるために考えられるすべてのハックを試しました.

Answer 1

z-indexes要素内の.wrapperdiv のすべての個別の必要はなくtd(それらはすべてに設定できると1思います)、これらのプロパティを設定します。

/* add these two to your selector */
#calendar tbody td {
  position: relative;
  z-index: 1;
}

/* create this new selector */
#calendar tbody td:hover {
  z-index: 2;
}

firebug と IE の開発者ツールを使用すると、Firefox と IE7 および 8 で動作しているように見えました。

Answer 2

問題は.hoverContent、 の子で.wrapperあることです。同じレベルになるように移動する必要があります。

 <td class="available">
    <div class="wrapper" style="z-index: 0;">
        <span class="date">10</span><strong class="price">£200</strong>
        <a href="/victory_cottage/booking/init/id/1/from/1336611600/nights/7" class="link popme"></a>
    </div>
    <div class="hoverContent">...

を に設定し、tdとして設定するposition:relativeと、問題が解決します。.hoverContentposition:absolute

Answer 3

コンポーネント自体が絶対に配置され、一時的に他のコンポーネントの上に表示される場合は、最上位、つまりページに追加するだけで、テーブルの z オーダーや配置のタイプについて心配する必要はありません。

Answer 4

絶対位置のホバー要素内に、相対位置の div を配置し、500 のような z-index を指定します。IE7 では、絶対位置と相対位置の要素が別々の z-index スタックを持つと見なされます

<div class="hoverContent" style="opacity: 1; display: none;">
    <div style='position:relative;z-index:500;'>
        <a class="btn popme" >Book Now</a>
        <p>content etc</p>
        <label></label>
    </div>
</div>

私が推測するような何か

Answer 5

以前に同様の問題を解決するためにこれを使用しました： http://css-tricks.com/snippets/jquery/fixing-ie-z-index/

これで問題が解決しない場合は、テーブル自体に 1 またはそれ以下の z-index を指定しても問題はありませんか?

Answer 6

この問題は、関連する質問に対するこの回答で説明されているように、IE の z-index スタッキングの問題が原因である可能性があります。

div.wrapperあなたの例では、表のセルの内側にz-index を追加することで、z-index の問題を修正できました。

前後のセルのレイヤー化を回避するには、Javascript を使用してセルの z-index を変更する必要があります。

しかし、z-index をいじるのは面倒なので、すべてのポップアップをテーブルの外側と後に配置するのが最善の解決策です。これにより、クレイジー/ハックな CSS を使用せずにレイヤーの問題が修正されます。

Answer 7

とをposition: relativeおよび に設定してz-indexみてください。tabletd