设置 openlayers 地图的 z-index答案

【问题标题】：set the z-index of an openlayers map设置 openlayers 地图的 z-index
【发布时间】：2013-11-19 06:21:52
【问题描述】：

我有一个 openlayers 地图，我尝试在同一页面中实现一个“灯箱”图片库。

“灯箱”图片库是指图片/箭头/退出按钮覆盖整个屏幕。

问题在于 openlayers 地图覆盖了灯箱画廊（见图）。

我已将 z-index 设置为地图和灯箱 div，就像这样

<div id='map_element' style='width: 900px; height: 400px; z-index:1;'> </div>

//and then for lightbox
#imagegal2 img {
 height:85%;    
 z-index:90;    
}

这不起作用

我该如何解决这个问题？

提前致谢

【问题讨论】：

html 中的灯箱在哪里？ z-index 仅在 div 处于同一级别（即，两者都由同一父级包含）并设置了位置时才有效。所以如果地图和灯箱有不同的父元素，则需要在父元素上设置z-index。
你能把你的代码贴在 jsfiddle 上吗？
@brouxhaha 谢谢。它可以跨浏览器工作，只需将position 添加到map_element 和imagegal2 。

标签： css openlayers

【解决方案1】：

灯箱在 html 中出现在哪里？ z-index 仅在 div 处于同一级别（即，两者都由同一父级包含）并且设置了 position 时才有效。所以如果地图和灯箱有不同的父元素，需要在父元素上设置z-index。

已将评论移至回答，因此您可以标记为已回答。

【讨论】：