web-dev-qa-db-ja.com

画面上の他のすべての上にDivを表示する方法は？

次のポップアップが表示されます。

enter image description here

しかし、このポップアップを上に移動してマップ上に表示すると、非表示になります。

enter image description here

何かを画面の一番上に常に表示するように強制するにはどうすればよいですか？

CSSプロパティシートでz-indexを設定しようとしましたが、うまくいきませんでした。

ポップアップ（DIV）が実際に常に他のすべての上に設定されるように設定できるHTML/CSSプロパティがありますか？

csshtmlpopupz-index
19
jordan

z-indexはそれほど単純な友人ではありません。実際にz-index:999999999999.....を入力しても問題ありませんが、z-indexを指定した場合は問題になります。異なるdom要素も互いに優先します。

JQueryを使用して要素cssを変更し、z-indexを提供する1つのソリューションを実行しました。そうすれば、このアイテムのz-indexが最後に与えられ、インデックスが記録されることを確認できます。ただし、これには何らかのアクションを処理する必要がありますが、あなたの場合は可能だと思われます。

これが機能するかどうかはわかりませんが、!importantパラメーターも指定してみてください：

#desired_element { z-index: 99 !important; }

参照philipwalton.com

24
GotBatteries

position: relativeを使用していますか？

このdivには他のdivとの関係でz-indexが必要なので、position: relativeを設定してからz-indexを設定してください。

ところで、ブラウザは動作するかどうかを確認することが重要です。 IEもFirefoxも良いものではありません。

9
Hugo Sousa

DIVのz-indexを他のDIVよりも大きいものに設定します。また、DIVにもposition以外のstaticが設定されていることを確認する必要があります。

CSS：

#someDiv {
    z-index:9; 
}

詳細はこちら： http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

5
Jason

つまり、位置を絶対に設定してみてください。

#yourDiv{
    position: absolute;
    z-index: 10;
};
5
Paul G

position:fixedを使用してz-index値を作成し、divに適用する必要があります

3
Phaneendra Charyulu Kanduri

これを行うための1つのフォームは、相対として設定されたDIV内に展開するパネルを挿入することです。

<div style="position:relative">
  <div style="position:absolute; z-index: 1000;">
    your code
  </div>
<div>

最初のdivを使用して内部コンテンツをページ内の特定の領域に配置し、2番目の絶対値はコンテナを参照する必要があります（相対であるため）。この場合のz-indexはコンテナとも呼ばれ、コンテナは上部にある必要があります。スタイルをcssクラスに入れ、絶対divのサイズを変更して、ホバーまたはコントロールする別のアクションで展開できます。

これが役立つことを願っています

1
freedeveloper