11

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

http://sutest.bravehost.com/

ご覧のとおり、IE7とIE6の両方で、複数日のイベントと日付の下にポップアップが表示されます。ポップアップにz-indexを配置すると、Firefoxの問題が修正されました。あらゆる種類のz-index値をポップアップに配置し、ポップアップと関連要素の表示プロパティを変更したり、その他のさまざまなアプローチを試したりしましたが、成功しませんでした。

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は、IE6および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サイトを試すことで、この問題を解決しようとしました。

どんな助けでも大歓迎です！

4

5 に答える 5

22

を使用position: relativeすると、IEの比較的配置された要素内に新しいz-indexスタッキングコンテキストが設定されます。

比較的配置された要素の内側の要素は、それらの要素に従ってスタックされますz-indexが、親要素の外側の要素と対話する場合は、親の要素z-indexが使用されます。これが、ポップアップが複数日イベント要素の下に表示される理由です（z-index要素に明示がない場合でも、ドキュメント内で「後で」来る要素は、z-index前に来る要素よりも暗黙的に高くなります）

それを修正するには、次のいずれかを行うことができます

  • セルでは使用せずposition-relative、ドキュメント全体に対してポップアップを配置します
  • コンテナをドキュメントの後半のコンテナよりも<div>高くz-indexします。

JavaScriptを使用してプログラムで変更するのz-indexが最適であることがわかりました。これは、ページの残りの部分との奇妙な相互作用を最小限に抑えるためです（つまり、z-index開いたときに高く設定し、閉じたときにデフォルトにリセットします）。

この問題について話しているいくつかのブログ投稿：

于 2009-07-01T18:53:07.597 に答える
2

PHP、.NETなどのプログラミング言語でこのテーブルを作成している場合。

あなたはこのようなものを作ることができます：

テーブルの合計行をカウントし、この合計でZ-Indexを開始してから、最後の行までカウンターを減らします。これを行うと、最初の行のz-indexが最大になり、最後の行のz-indexが低くなります。

<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！

于 2012-11-28T22:19:59.117 に答える
1

含まれている要素のz-indexを設定してみてください。したがって、ポップアップのz-indexは1（または2）になり、コンテナーのz-indexは0（または1）になります。

于 2009-07-01T18:10:54.453 に答える
0

これが役立つかどうかはわかりませんが、z-indexプロパティは、相対的、絶対的、固定されたhttp://www.w3schools.com/Css/pr_pos_z-index.aspに配置されたアイテムに適用されます。

編集：li要素がそれを完全に無視する可能性があることを意味します...

于 2009-07-01T18:17:28.047 に答える
0

ポップアップdivのz-indexよりも低いz-indexを複数日のイベントおよび日付要素に配置しようとしましたか？また、z-index属性を持つ要素の位置がabsoluteであることを確認してください（レイアウトの問題に少し取り組む必要があるかもしれません）。

于 2009-07-01T18:28:00.510 に答える