0

I’d like to add a CartoDB map to my website so that it has a fixed position and is hidden behind the main content. What I’ve done is quite similar to the html/css beneath:

<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>

This works pretty well for me in Chrome, BUT in Safari, either the #1stcontent or the #2ndcontent div is hidden under the map instead of being displayed on a top layer above the map. You may check this under http://asyl.ungeruehrt.de/ where the project is available at the moment.

Would be happy for some tips how to fix this behaviour!

Tibor
  • 129
  • 1
  • 10

1 Answers1

0

You could solve this in Safari 7 by setting the z-index to what it normally is, then giving the style block the additional rule of pointer-events:none which would still allow the underlying text/elements to be selected as normal.

Provided there are no click elements on that circle or dragon, everything would behave exactly like you're expecting it to.

Of course, this would blow away support for browsers that don't have a full implementation ofCSS 3, but it's the world we live in these days. You could always fall back to the negative z-index implementation for that scenario.

Edit: Without going into too much detail on your CSS, the likely culprit of your second failed scenario (the z-index on the header not appearing above those elements with a z-index) is likely due to the header not being given a positioning value other than static. You could probably fix this by giving it some stacking context by setting the CSS rule position:relative; on the element and then giving it a z-index greater than the stylistic elements. e.g. .dragon{z-index:1;position:absolute;} .circle{z-index:1;position:absolute;} .header{z-index:2;position:relative;}

saleem ahmed
  • 326
  • 1
  • 5
  • 27
  • Not sure if I understand your answer the right way but `pointer-events:none;` seems to be quite useless for me since I want to hide the whole embedded map behind the regular content and `pointer-events:none;` would just make it possible to move the map behind the content box, right? Adding a z-index to the #map works unfortunately not for me. In fact, giving a `z-index:1;` for example, the #map is still on top of the content box in safari. When I set `z-index:-1;` the #map is hidden behind the content but than it’s not clickable anymore.. – Tibor Apr 15 '15 at 13:08