значения z-индекса складываются неправильно

Question

Насколько я понимаю, значения z-index включают правильный порядок наложения с использованием CSS.Поэтому я хочу, чтобы круговая кнопка вызова имела больший z-индекс, чем z-индекс карты, который должен иметь больший z-индекс, чем нижние красные прямоугольники (.subThreeAndFour).Таким образом, я присвоил им z-индексы 0, -1 и -2 соответственно.Однако, как показано, карта все еще находится под .subThreeAndFour (два красных прямоугольника внизу):

Относительно следующего кода:

iframe{
    position: absolute;
    left:0.6%;
    top:49.3%;
    width:91.3%;
    height: 48%;
    z-index: -1;
}

.subThreeAndFour, .subThree, .subFour{
    z-index: -2;
}

.mainCircleCall{
    background-image: url(https://www.falconemergency.com/wp-content/themes/falcon/images/call3.gif);
    background-size: 120% 120%;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: white;
    border: 2px greenyellow solid;
    z-index: 0;
}

Полный код на https://codepen.io/Refath/pen/XGVNKY?editors=0110

Answer 1

Это то, что вы хотите Ссылка Codepen

Так что в основном я переместил порядок некоторых html-тегов внутри .sub-container

    <div class="subThreeAndFour">
        <div class="subThree"></div> //moved up
        <div class="subFour"></div> //moved up
        <div class="mapWrapper">
            <iframe id="gmap_canvas" src="https://maps.google.com/maps?q=brooklyn%20tech&t=k&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div>

    </div>
    <div class="mainCircle">h</div> //moved down

Итак, в основном,элементы, которые являются последними, рисуются последними (т. е. поверх других в вашем случае)

В вашем случае, если поставить maincircle последним, я говорю браузеру, чтобы рисовать его последним. Это расположит его поверхпорядок наложения.