z-index 值未正确堆叠

Question

根据我天真的理解，z-index 值使用 CSS 启用正确的堆叠顺序。因此，我希望圆形呼叫按钮的 z-index 比地图的 z-index 大，而地图的 z-index 应该比底部的红框 (.subThreeAndFour) 大。因此，我分别为它们分配了 0、-1 和 -2 的 z 索引。但是如图所示，地图还在.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 link

所以基本上我在 .sub-container

中移动了一些 html 标签的顺序

    <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 放在最后的情况下，我告诉浏览器，绘制它 last.This 会将它放在堆叠顺序的顶部。

z-index 值未正确堆叠

z-index values don't stack correctly

html

css

z-index