ネストされたZ-インデックスが機能しないのはなぜですか？

Question

いくつかの情報で表示したいオーバーレイがあります。ただし、オーバーレイの下に、オーバーレイ上に表示したいボタンがあります。私は9998のz-インデックスと9999のz-インデックスでその下のボタンでオーバーレイを設定しましたが、うまくいきません。これはまったく可能ですか？

あなたが z-indexを検討するために、相対的な絶対的またはボタンの上に固定する positionプロパティを設定する必要が

.overlay-message { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
    background-color: rgb(0, 0, 0); 
 
    opacity: .9; 
 
    z-index: 9998; 
 
} 
 
h4 { display: table-cell; 
 
color: #fff;text-align: center; 
 
vertical-align: middle; } 
 
.container { 
 
    align-items: center; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 100%; 
 
} 
 
.row { 
 
    display: table !important; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
    .one-fifth-flex { 
 
     width: 50%; 
 
     padding-bottom: 20px; 
 
     float: left; 
 
    } 
 

 
    .ico-btn { 
 
     background-color:transparent; 
 
     color:rgb(26, 188, 156); 
 
     border-color:rgb(26, 188, 156); 
 
     border-style: solid; 
 
     border-width: 10px; 
 
     width:100px; 
 
     z-index: 9999; 
 
}

<div class="overlay-message"> 
 
     <h4>Hey! Tap on the button above!</h4> 
 
</div> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="one-fifth-flex"> 
 
      <div role="button" class="ico-btn"> 
 
       Me 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

：

.overlay-message { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: table; 
 
    background-color: rgb(0, 0, 0); 
 
    opacity: .9; 
 
    z-index: 9998; 
 
} 
 
h4 { display: table-cell; 
 
color: #fff;text-align: center; 
 
vertical-align: middle; } 
 
.container { 
 
    align-items: center; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: 100%; 
 
} 
 
.row { 
 
    display: table !important; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
    .one-fifth-flex { 
 
     width: 50%; 
 
     padding-bottom: 20px; 
 
     float: left; 
 
    } 
 

 
    .ico-btn { 
 
     position: relative; 
 
     background-color:transparent; 
 
     color:rgb(26, 188, 156); 
 
     border-color:rgb(26, 188, 156); 
 
     border-style: solid; 
 
     border-width: 10px; 
 
     width:100px; 
 
     z-index: 9999; 
 
}

<div class="overlay-message"> 
 
     <h4>Hey! Tap on the button above!</h4> 
 
</div> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="one-fifth-flex"> 
 
      <div role="button" class="ico-btn"> 
 
       Me 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

として、あなたはg他の高齢者の答えを知りませんが、私たちがなぜポジションプロパティを必要とするのかを追加したいのは、相対、絶対、または固定として設定することです。

リファレンス：そのオーバーラップ要素の順序を積層CSSコントロール垂直にhttps://css-tricks.com/almanac/properties/z/z-index/

z-indexプロパティ。のように、物理的にあなたの近くにあるかのように見えます。 z-indexは、（デフォルト）以外の位置値を持つ要素にのみ影響します。

要素は、さまざまな理由でオーバーラップする可能性があります。たとえば、相対的な配置では、他の要素と重なることがあります。負のマージンが要素を別の要素よりも引き上げた。絶対配置された要素は互いに重なり合う。あらゆる理由がある。

任意のz-index値がなければ、彼らはnon-static positioningとDOM(the lowest one down at the same hierarchy level appears on top). Elementsで表示される順序で要素stackは常にデフォルトの静的な位置決めを持つ要素の最上部に表示されます。

スタック・コンテキストに関する主なポイントは、z-indexを使用して、独自のスタッキング・コンテキスト内でのみ要素のスタック順序を再配置できることです。その全体のスタック・コンテキストは、そのスタック・コンテキスト内にスタック・ポジションを持ちます。スタック・コンテキストは、そのz-indexプロパティと、その親スタッキング・コンテキスト内の兄弟のプロパティによって決まります。したがって、異なるスタッキングコンテキストからの要素は、最終的なスタッキング順序でインターリーブされることはありません（これは、スタッキングコンテキストが「アトミック」であることを意味します）。

“painters algorithm”,のオブジェクトをバック・トゥ・フロントのシーンにペイントすると考えると、スタッキング・コンテキストはペイント内のペイントと似ています。あなたは最初、スタック・コンテキスト内のすべてのものを適切な順序でバック・ツー・フロントでペイントし、次に、親コンテキストをペイントするときに、そのペインが所属するどこにでも結果全体をスラップします。

z-index,の場合、DOMの順序はほとんど同じですが、上に位置するものがスタックになりますが、浮動小数点も浮動小数点の前に置かれます（ただし、配置されたボックスの後ろ）。