IE 6と7のリストとテーブルを使用した絶対的な位置付け/ Zインデックスの問題

Question

Simple Updatesコンテンツ管理システム用に最終的に生成されるCSS/XHTMLテーブルベースのカレンダーのプロトタイプを作成しています。私はセルに収まらないものがある場合、絶対位置を使って1日にすべてのイベントを表示するポップアップを作成する際に問題に遭遇しました。問題はここで見ることができます：

http://sutest.bravehost.com/

あなたが見ることができるように、IE7とIE6の両方で複数日のイベントと日付の下のポップアップポップ。ポップアップにZ-インデックスを置くと、Firefoxで問題が解決されました。私はポップアップにあらゆる種類のz-インデックス値を入れて、ポップアップと関連要素の表示プロパティーを変更するだけでなく、多くの他のさまざまなアプローチを成功させました。次のように

HTMLは次のとおりです。

<td valign="top"><div> 
    <div class="date">25</div> 
    <ul> 
     <li class="single"><a href="#">History</a></li> 
     <li class="single"><a href="#">Biology</a></li> 
     <li class="single"><a href="#">Computers</a></li> 
     <li class="single"><a href="#">POTCH</a></li> 
     <li class="single"><a href="#">Precal</a></li> 
     <li class="more"><a href="#">+3 More</a></li> 
    </ul> 
    <div class="popup"> 
     <span class="close"><a href="#">X</a></span> 
     <ul> 
      <li class="single"><a href="#">History</a></li> 
      <li class="single"><a href="#">Biology</a></li> 
      <li class="single"><a href="#">Computers</a></li> 
      <li class="single"><a href="#">POTCH</a></li> 
      <li class="single"><a href="#">Precal</a></li> 
      <li class="single"><a href="#">Science PC</a></li> 
      <li class="single"><a href="#">Physics</a></li> 
      <li class="single"><a href="#">Construction</a></li> 
     </ul> 
    </div> 
</div></td> 

これはハードコーディングされたポップアップを持つテーブルからの細胞です。最初のリストには、通常の表示可能なイベントが含まれています。 2番目のdivを含むdivはポップアップです。これは、マルチ日間のイベントの上に表示する必要があります。

<td valign="top" class="blank"><div> 
    <div class="date">2</div> 
    <ul> 
     <li style="background-color:plum;">&nbsp;<img src="endr.png" alt="." /></li> 
    </ul> 
</div></td> 

私は「偽」マルチ日間のイベントにリスト項目を使用しています。この日にLiがでポップアップ上でレンダリングするように見えるバーのセクションであることをスタイル設定され、IE 6と7

ポップアップに関連するCSS：

.popup { 
position:absolute; 
top:-1px; 
background-color:white; 
border:1px solid black; 
overflow:visible; 
padding:10px; 
width:auto; 
z-index:1; 
margin-left:-1px; 
} 

とマルチ日にイベント：

li { 
margin:2px 0; 
padding:0 0 2px 5px; 
white-space:nowrap; 
} 

私は繰り返しGoogleの検索や他のQ & Aサイトを試みることによってこの問題を解決しようとしました。

ご協力いただければ幸いです！

Answer 1

を使用すると、position: relativeは、IE内の相対的に配置された要素内に新しいZ-インデックススタッキングコンテキストを設定します。

相対配置された要素内の要素は、z-indexに従って積み重ねられますが、親要素の外側の要素とやりとりするときは、親要素のz-indexが使用されます。これは、ポップアップが複数日のイベント要素の下に表示される理由です（要素に明示的なz-indexがなくても、文書の「後で」に来る要素は暗黙のうちにより高いz-indexを持ちます）。

Toあなたはどちらか

• 後に、文書内の1つのよりz-index高いコンテナ<div>を与えるセルにposition-relativeを使用すると、ドキュメント全体
• にポップアップを位置決めすることはできません、それを修正します。私はそれを開いている、とするときデフォルトに戻ってそれをリセットしたとき、すなわち（それはページの残りの部分と奇妙な相互作用を最小限に抑えるために、最善のことをJavaScriptでプログラム的z-indexを変更することがz-index高く設定していることがわかりました

• http://annevankesteren.nl/2005/06/z-index
• http://verens.com/archives/2005/07/15/ie-z-index-bug/
：それは）この問題について話

いくつかのブログ記事を閉じています10

Answer 2

含まれている要素のZ-インデックスを設定してみてください。したがって、あなたのポップアップは1（または2）のz-インデックスを持ち、コンテナは0（または1）のz-インデックスを持ちます。これが役立つ場合

Answer 3

わからないが、Z-indexプロパティは、固定され、絶対的、相対配置されている項目に適用http://www.w3schools.com/Css/pr_pos_z-index.asp

編集：li要素が完全に...それを無視するかもしれないことを意味

Answer 4

複数の日のイベントと日付の要素にZ-インデックスをポップアップのdivよりも小さくしてみましたか？また、z-index属性を持つ要素がposition：absoluteを持っていることを確認してください（レイアウト上の問題があるため少し再生する必要があります）。

Answer 5

あなたがなど

PHP、.NET、などいくつかのプログラミング言語で、この表を作っている場合は、このような何かを行うことができます。

その後、Zを起動し、あなたのテーブルの合計行の数を数えます-Indexをこの合計と比較し、最後の行までカウンタを減らします。これを行うと、最初の行は最大のZインデックスを持ち、最後の行は下になります。

<table> position relative 
<tr> nothing 
<td> nothing 
<div> position relative 
<element position absolute> 
</div> 
</td></tr></table> 

---- 
Table Loop: 

$nZ = count($resource); 
foreach($resource as $line) { 
<tr><td> 
    <div style="z-index: $nZ">content</div> 
</td></tr> 
$nZ--; // Decrement nZ 
} 
---- 

C ya！