Question

据我幼稚的理解，z-index值可使用CSS启用正确的堆叠顺序。因此，我希望循环调用按钮的z索引大于地图的z索引，而地图的z索引应该比底部的红色框（.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

所以基本上，我将.html容器中的一些html标签的顺序移动了

Source Before Mapping
TestReverseFalse: False
TestReverseTrue: True
ITrue:True
IFalse:False
TestInteger:100
TestNullInteger:100

After Mapping
TestReverseFalse: True
TestReverseTrue: False
ITrue:True
IFalse:False
TestInteger:100
TestNullInteger:100

所以基本上，最后的元素是最后绘制的（即在您的情况下位于其他元素之上）

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

Z-index值无法正确堆叠

1 个答案: