負のマージンを使用しているときにz-インデックスが機能しない

Question

私はZ-インデックススタッキングに問題があります。下のdivは、Z-indexとpositionが下のdivがその上のdivの下にある必要がある場合でも、上のdivの上に表示されます。

私は使用しているコードでJSFiddleの例を提供しました。

https://jsfiddle.net/6hewonhb/

.above-box { 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    padding-top: 20px; 
 
    padding-bottom: 20px; 
 
    background: rgba(251, 47, 111, 0.2); 
 
    color: #fff; 
 
    z-index: 10 !important; 
 
    position: relative !important; 
 
    margin-top: 0px !important; 
 
    margin-right: 0px !important; 
 
    margin-left: 0px !important; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
.below-box { 
 
    margin-top: -20px !important; 
 
    margin-left: 70px !important; 
 
    position: relative !important; 
 
    z-index: 5 !important; 
 
    background-color: #f00; 
 
    height: 100px; 
 
    width: 100px; 
 
}

<div class="above-box"> 
 
    TEST 
 
</div> 
 

 
<div class="below-box"> 
 
    TEST 
 
</div>

Answer 1

これは、実際に働いています。 divdivのRGBA値には注意してください。

4番目の値は、不透明度パラメータであり、ここでは不透明度が1に設定されている：

background:rgba(251,47,111,1); 

See this fiddle

を加えて、CSSコードでほとんどどこでも!important;を追加する必要はありません。

EDIT：問題がある場合は、z-indexプロパティを追加する前にDOM内のこれらの各要素の位置を再確認してください。 z-indexプロパティは、DOMドキュメント内の同じレベルにある要素で正常に動作します。

Like this example

また、あなたはこの記事にZインデックスのこの非常に良い説明を読むことができます： Z-Index Relative or Absolute?

役に立てば幸いです。