html - 如何将 z-index 设置为在 Safari 中工作的 CartoDB？

Question

我想在我的网站上添加一个 CartoDB map ，这样它就有一个固定的位置并且隐藏在主要内容的后面。我所做的与下面的 html/css 非常相似:

<style type="text/css">
#1stcontent{
position:relative;
z-index:10;
margin-bottom:100%;
margin-bottom:100vh;}
#map{
height:100%;
height:100vh;
width:100%;
width:100vw;
position:fixed;
top:0;
left:0;
}
#2ndcontent{
position:relative;
z-index:10;
}
</style>
<div id="1stcontent">1st content</div>
<div id="map"><iframe src="//cartodb.com…"></iframe></div>
<div id="2ndcontent">more content</div>

这在 Chrome 中对我来说效果很好，但在 Safari 中，#1stcontent 或 #2ndcontent div 隐藏在 map 下方，而不是显示在 map 上方的顶层。您可以在 http://asyl.ungeruehrt.de/ 下查看该元素目前可用的位置。

很乐意提供一些如何解决此问题的提示!

Answer 1

您可以在 Safari 7 中通过将 z-index 设置为通常的值来解决此问题，然后为样式 block 提供额外的 pointer-events:none 规则，这仍然允许底层文本/元素被正常选择。

如果那个圆圈或龙上没有点击元素，一切都会像您期望的那样表现。

当然，这会取消对未完全实现 CSS 3 的浏览器的支持，但这就是我们现在生活的世界。对于该场景，您始终可以回退到否定的 z-index 实现。

编辑:在不详细介绍您的 CSS 的情况下，您的第二个失败场景(标题上的 z-index 未出现在具有 z-index 的元素上方)的可能罪魁祸首是可能是因为标题没有被赋予静态以外的定位值。您可以通过设置 CSS 规则 position:relative; 给它一些堆叠上下文来解决这个问题。在元素上，然后给它一个大于风格元素的 z-index。例如.dragon{z-index:1;position:absolute;} .circle{z-index:1;position:absolute;} .header{z-index:2;position:relative;}