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

Question

我想在我的网站上添加一个 CartoDB 地图，使其位置固定并隐藏在主要内容后面。 我做的和下面的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 隐藏在地图下方，而不是显示在地图上方的顶层。您可以在http://asyl.ungeruehrt.de/ 下查看该项目目前可用的位置。

希望能提供一些解决此问题的提示！

Answer 1

您可以在 Safari 7 中通过将 z-index 设置为正常值来解决此问题，然后为样式块添加 pointer-events:none 的附加规则，该规则仍允许正常选择底层文本/元素.

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

当然，这会破坏对没有完整实现CSS 3 的浏览器的支持，但这就是我们现在生活的世界。对于这种情况，您总是可以退回到否定的 z-index 实现。

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