モーダルは固定されたnavbarの後ろに表示されます

Question

固定されたナビゲーションバーを持つブートストラップベースのサイトを持っています（これはトップページのページにあります）、モーダルポップアップを表示したいときは、

と私はすべてのモーダルがそれらのナビゲーションバーの後ろに表示されますように見えますので、それはまた、画像をアップロードするためsummernoteモーダルに表示されmargo template from graygrids

を使用。 Zインデックスを意味するナビゲーションバーが固定されている

Answer 1

は、それは子供たちのための唯一の相対的なものです。簡単な修正は、外側のモーダルコンテナの上端を単純にページの下に押して、navbarの背後から押し出すことです。

それ以外の場合は、モーダルマークアップがヘッダーに配置されていて、親ナビゲーションバーのZ-インデックスよりも高いz-インデックスを付ける必要があります。

Answer 2

CSSのZインデックスを調整する必要があります。あなたのナビゲーションのZ-インデックスは、他のものよりも高い数字です。それを調整するには、モーダルポップアップの方が高いz-インデックスを追加する必要があります。コードは次のようになります

たとえばz-index：3;

これを行うには、ポップアップに位置を設定する必要があります。

たとえば、position：absolute;

あなたも、さらにあなたのCSSにこのコードを置くことで位置を調整することができ、位置を設定した後

トップ：500pxなど。左：500ピクセル。

これは、絶対位置を置いたコンテナが、上から500ピクセル、左から500ピクセル移動することを意味します。

zインデックスが何であるかわからない場合は、私はあなたのための写真を提供します。

z-index axis example

Answer 3

私はCSSでのためのモーダル・背景（モーダル背後の影）のための超高z-index値（1000000）、そして少し高い1（1000001）付属の問題を解決するために、モーダル：

.modal-backdrop { 
    z-index: 100000 !important; 
    } 

    .modal { 
    z-index: 100001 !important; 
    } 

希望します。