出现在某些地图元素下的 JQuery 弹出窗口答案

【问题标题】：JQuery popup appearing under some map elements出现在某些地图元素下的 JQuery 弹出窗口
【发布时间】：2012-10-16 15:25:11
【问题描述】：

对于 JQuery 和 OpenLayers 来说都是相当新的。一切都很顺利，直到我尝试使用 JQuery 的对话框类打开一个模式对话框。

对话框工作正常，只是它出现在地图的某些元素下：

这在 Opera 和 Chrome 中是相同的（其他未测试）。任何人都可以提出解决此问题的方法吗？谢谢。

编辑：我创建了一个演示问题的小提琴here。

HTML：

<body>
    <div id="map"></div>

    <div id="popup" title="Test">
        <p>Blah blah</p>
    </div>
</body>

Javascript：

var map;

$(function () {

    //init map
    map = new OpenLayers.Map('map', {});
    var wms = new OpenLayers.Layer.Google('Google Map Layer', { type: google.maps.MapTypeId.HYBRID });

    map.addLayer(wms);

    if (!map.getCenter()) {
        map.zoomToMaxExtent();
    }

    //init popup
    $("#popup").dialog({
        height: 400,
        width: 300,
        modal: true
    });
});

【问题讨论】：

增加popup的z-index
您能在此处添加链接或代码吗？最好的盲目猜测是 z-indexes 和嵌套元素
已经创建了一个小提琴，请参阅问题，谢谢。

标签： jquery dialog popup openlayers z-order

【解决方案1】：

看起来如果您将position:relative; 添加到地图中，它会按预期工作。

#map { position:relative; width:200px; height:200px; }

Example

【讨论】：

太棒了，谢谢！你能解释一下为什么会这样吗？ relative 是否会以某种方式重置 z 顺序？
stackoverflow.com/questions/5371306/… 上的答案解释了一点，基本上 z-index 只适用于定位元素。
更多关于 z-index coding.smashingmagazine.com/2009/09/15/…

【解决方案2】：

这都是关于您的元素的z-index。这是它的主要工作原理（您只需要找到“使用条款”链接的类或 ID 并将其添加到下面的第一行）：http://jsfiddle.net/GRVuZ/5/

.gmnoprint, .zolControlZoom, .olControlNoSelect {z-index:900 !important;}
#jpopup {z-index:1000;}

【讨论】：