z-index не работает при использовании отрицательных полей

Question

У меня проблема с укладкой z-индекса. Следующий div появляется над вершиной верхнего div, даже когда z-индекс и позиция указывают, что нижний 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

Это на самом деле работает. Будьте осторожны с вашими значениями RGBA для .above-box.

Четвертое значение параметра непрозрачности, здесь непрозрачности устанавливается в 1:

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

See this fiddle

Кроме того, не требуется, чтобы добавить !important; почти везде в коде CSS.

EDIT: Для вашей проблемы, пожалуйста, дважды проверьте позиции каждого из этих элементов в DOM перед добавлением свойства z-index. Свойство z-index отлично работает с элементами, которые находятся на одном уровне в документе DOM.

Like this example

Кроме того, вы можете прочитать это очень хорошее объяснение г-индекса на этот пост: Z-Index Relative or Absolute?

Надежда, что помогает.