Как установить z-index в CartoDB, что он работает в Safari?

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 ДИВ скрывается под картой вместо того, чтобы отображаться на верхнем слое над картой. Вы можете проверить это до http://asyl.ungeruehrt.de/, где проект доступен на данный момент.

Был бы рад некоторым советам, как исправить это поведение!

Answer 1

Вы можете решить эту проблему в Safari 7, установив z-index в соответствии с тем, что он обычно представляет, и предоставив блоку стиля дополнительное правило указателей-событий: none, которое все равно позволит выбрать основной текст/элементы в качестве нормального.

При условии отсутствия элементов кликов на этом круге или драконе, все будет вести себя точно так, как вы ожидаете.

Конечно, это уберет поддержку браузеров, которые не имеют полной реализации CSS 3, но это мир, в котором мы живем в наши дни. Вы всегда можете вернуться к отрицательной реализации z-index для этого сценария.

Редактировать: Не вдаваясь в излишние подробности на вашем CSS, вероятный виновник вашего второго неудачного сценария (Z-индекса в заголовке не появляющейся над этими элементами с Z-индекс), вероятно, из-за заголовок не получает значения позиционирования, отличного от статического. Вероятно, вы могли бы исправить это, предоставив ему некоторый контекст стекирования, установив положение правила CSS: relative; на элементе, а затем дает ему z-индекс больше стилистических элементов.