いつ/どのようにしてz-indexはスタッキング・コンテキストを破りますか？

Question

私の理解では、Zインデックスの要素はonly stacked with their siblingsです。私はそのz-index "doesn't work" with position: fixedも読んだ。しかし、私は一緒に2つを使用していて、それは私がそれを望んでいたものをまさにやってしまった。理由を理解したい。

1つの要素を除いてページ内のすべてをカバーする必要があるブロックdivがあります。要素はブロッカーの兄弟ではなく、私はそれが不可能になると思っていましたが、機能しました。ここでどのようなルールが悪用されているのですか？それが他のブラウザでも動作するかどうかはどうすれば予測できますか？

.top { 
 
    background-color: yellow; 
 
} 
 

 
.yes { 
 
    position: relative; 
 
    z-index: 10; 
 
    background-color: blue; 
 
} 
 

 
.no { 
 
    position: relative; 
 
    z-index: 1; 
 
    background-color: red; 
 
} 
 

 
.blocker { 
 
    position: fixed; 
 
    z-index: 5; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(0, 0, 0, .7); 
 
}

<div class="top"> 
 
    <button class="yes"> 
 
    Yes 
 
    </button> 
 
    <button class="no"> 
 
    No 
 
    </button> 
 
</div> 
 
<div class="blocker"> 
 

 
</div>

Answer 1

すべて非配置ボックスは、そのような祖先がない場合here上場基準のいずれかを満たしている最も近い祖先、またはルート要素によって確立されたのと同じスタッキングコンテキストに属します。これは、要素が同じスタッキングコンテキストに参加するために、互いの兄弟である必要はないことを意味します。彼らは遠方の先祖を共有するかもしれません。（HTMLではすべての要素がルート要素から降ります）、の親のを共有する必要はありません。

.topは、配置されておらず、Z-インデックスがautoであるため、子孫.yesと.noの新しいスタッキングコンテキストを確立しません。したがって、.yes,.noおよび.blockerは、すべて同じスタッキングコンテキスト、つまりルートスタッキングコンテキストに参加します。その結果、.yesが.blockerよりも高いz-インデックスを持つという事実だけが、それを前面に塗りつぶすことになります。 .yes、.noと.blockerのそれぞれが独自のスタッキングコンテキストを確立んが、スタッキングコンテキストは、彼らがが、ここで適切でない確立こと

注意。 がに参加するスタッキングコンテキストであり、それらはすべて同じルートスタッキングコンテキストに参加します。