0

我想向我的网站添加一个 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/下查看该项目目前可用的位置。

很高兴有一些提示如何解决这种行为！

4

1 回答 1

0

您可以在 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;}

于 2015-04-15T11:48:23.800 回答