web-dev-qa-db-ja.com

コンテナにオーバーフロースクロールがある場合、Zインデックスがテーブル内で機能しない

テーブルの外側に絶対divを配置するのに問題があります。テーブルレイアウトの大ファンではありませんが、テーブルレイアウトのある既存のプロジェクトを見つけました。コードは次のとおりです

<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;" width="600px">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr><td height="37px" width="600px" style="background-image:url('P--IMG--P/welcomepanel/header.png'); background-repeat:no-repeat; background-position:bottom left;"><span class="heading" id="I--heading_text--I" style="padding-top:3px;"></span></td></tr>
        <tr>
            <td align='left' valign='middle' width="600px" height="522px" style="background-image:url('P--IMG--P/welcomepanel/middelblock_repeat.png'); background-repeat: repeat-y; padding-top:0px">
                <div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
                    [--C--comp--C--]
                </div>
            </td>
        </tr>
        <tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr>
    </table>
</td>

[--C--comp--C--]がdiv内の画像を含むfckEditorの置換文字列である場合、そのdivのz-indexを10に設定しましたが、テーブルの外に出たくありません。その位置は絶対です。

私が間違っているかもしれないことを教えてください。

問題はtdコンテナのオーバーフロースクロールにあることに気づきました。overflow-y:scrollを削除すると正常に機能しますが、問題は、内部に多くのコンテンツがあるため、オーバーフローが必要なことです。そのtd。今どうしたらいいのかわからない。 :( ..誰かが兄弟を助けてください！

enter image description here

小さな地図をテーブルの外側に置き、大きな地図をテーブルの内側に残す必要があります。Jqueryを使用して大きな地図にカーソルを合わせると、fckeditorに読み込まれる小さな画像が表示されます。これがお役に立てば幸いです。

htmlcsshtml-tablez-index
12
Dee-M

Z-indexが正しく機能するためには、z-indexプロパティを持つすべての要素に、任意の位置が設定されている必要があります（例：position：relative）。また、2つを比較するために、テーブルに位置とz-indexを割り当てます。

42
locrizak

「テーブルの外に出る」ために要素を絶対的に配置したいということは、テーブルの場所に基づいてではなく、テーブルの外側に配置したいという意味ですか？それとも、テーブルの内側に配置したいが、テーブルの境界にクリップしたり、他のコンテンツと重ねたりしないようにしたいということですか？

前者の場合は、絶対位置のDIVをコード内の別の場所に移動することをお勧めします。テーブルに表示されないのに、なぜテーブルの中に置くのですか？スタッキングコンテキストとオーバーフロープロパティを回避するのが難しくなるだけです。

後者の場合は、絶対位置の要素を含むdivの_overflow-x_プロパティと_overflow-y_プロパティを調整または削除することをお勧めします。絶対的に配置されている場合でも、ブラウザが子要素にオーバーフロークリッピングルールを適用することは考えられます。

また、_z-index_は、兄弟要素のスタック順序に影響を与えることのみを目的としていることに注意してください。ツリーの同じレベルにある要素、つまり500pxの高さのdiv内の他の要素は、zオーダーに従ってスタックされますが、親ノードと子ノードは異なるルールで再生されます。

この答えが役に立たない場合は、おそらく私はあなたが何をしたいのか誤解しています。それがどのように動作しているかの写真を投稿し、それをどのように動作させたいかを説明できますか？

投稿されている写真への返信として編集：

この場合にやりたいことは、どういうわけかスクロールDIVの外に小さなマップを取得することだと思います。これを変更できますか...

_<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
    [--C--comp--C--]
</div>
_

...このようなものに？

_[--C--compSmallMap--C--] <!-- Small map code goes here -->
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
    [--C--compBigMap--C--] <!-- Big map code goes here -->
</div>
_

そうでない場合は、挿入されるコードを変更して、コードの上位レベルに小さなマップを作成できますか？たとえば、document.getElementsByTagName("body")[0].appendChild(element);を使用してルートノードに要素を追加できます（例として、それよりも優れた方法がある場合があります）。それ、またはそのようなものを使用すると、小さなマップをドキュメントツリーの上位に配置できる可能性があります。これにより、クリッピングが防止されます。

1
Joshua Carmody