Z-Index funktioniert nicht, wenn negative Ränder verwendet werden

Question

Ich habe ein Problem mit Z-Index-Stacking. Das untere div erscheint über dem oberen Teil des oberen div, selbst wenn der z-index und der positionszustand das darunterliegende div unter dem div darüber liegen sollte.

Ich habe eine JSFiddle eines Beispiels mit dem Code, den ich verwende.

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

es tatsächlich funktioniert. Seien Sie vorsichtig mit Ihren RGBA-Werten der .above-box Div.

Der vierte Wert der Opazität Parameter, hier Opazität auf 1 gesetzt ist:

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

See this fiddle

Außerdem ist es nicht fast überall in dem CSS-Code hinzufügen !important; benötigt.

BEARBEITEN: Überprüfen Sie für Ihr Problem bitte die Positionen jedes dieser Elemente im DOM, bevor Sie die z-index-Eigenschaft hinzufügen. Z-Index-Eigenschaft funktioniert gut mit Elementen, die in DOM-Dokument auf der gleichen Ebene sind.

Like this example

Auch können Sie diese sehr gute Erklärung von z-index auf diesen Beitrag lesen: Z-Index Relative or Absolute?

Hoffnung, das hilft.