JQuery popup appearing under some map elements

Question

Pretty new to both JQuery and OpenLayers. Everything was going swimmingly until I've tried to open a modal dialog using JQuery's dialog class. The dialog works fine except it appears under certain elements of the map: This is the same in both Opera and Chrome (Not tested others). Can anyone suggest a way to fix this? Thanks. EDIT: I've created a fiddle here that demos the problem. HTML: ```

``` 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 }); }); ```

Accepted Answer

it looks like if you add `position:relative;` to the map it works as expected.

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

Example

JQuery popup appearing under some map elements

Solution

Problem