テーブルのセルの内側にあるときのCSSのZインデックスの問題

Question

私はカレンダー/テーブルを持っています。毎日カーソルを置くと小さなポップアップが表示され、各セルの下に絶対位置があります。

この作業を行うために、各セルの内側に<div style="relative" />を追加しました。 FFでうまく動作しますが、IE上でz-indexを無視すると無視されます。

私はtableなどtdにposition: relativeとz-indexを設定してみてください+ 8、それはIE 7で動作するように取得するために

Answer 1

td要素内部.wrapperのdivの上のすべての個別z-indexesは必要ない（彼らはすべての私は信じ1に設定することができます）、およびこれらのプロパティを設定：放火魔とIEの開発ツールを使用して

/* 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; 
} 

を、問題が.hoverContentが.wrapperの子であるということです、それは同じレベルに座っているように、あなたはそれを移動する必要があり、それはFirefoxとIE7での作業と8

Answer 2

を私は考えることができるハックのすべてを試してみました。あなたの絶対位置ホバー要素内

Answer 3

、相対位置のdivを配置し、それを500 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> 

のようなものをスタック持つものとして絶対的および相対的な位置付けの要素を考慮したようなのzインデックスを与えますあなたがテーブル自体のzインデックスを与える場合は、このヘルプは、それは問題ではないしていない場合 http://css-tricks.com/snippets/jquery/fixing-ie-z-index/

：私は

Answer 4

は私が前に同様の問題で私を助けるために、これを使用していると思うこと1または何か低い？

Answer 5

この問題は、this answerに関連する質問に記載されているように、IEのz-インデックススタッキングの問題が原因である可能性があります。

例では、テーブルセルの内側にあるdiv.wrapperにZ-インデックスを追加することで、Z-インデックスの問題を修正できました。

セルを前後に重ねるには、セルのZ-インデックスをJavascriptで変更する必要があります。

しかし、z-indexが厄介になっているので、最良の解決策は、すべてのポップアップをテーブルの外側と外側に配置することです。それはあなたのレイヤリングの問題を狂った/ハックしたCSSなしで修正します。

Answer 6

たように私には登場：

は position:relativeされるように設定

<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">... 

、position:absoluteとして.hoverContentを設定し、それはあなたの問題を解決します。

Answer 7

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