Search code examples
javascriptcssopenlayers

Stacking divs and openlayers vector layers

I have an openlayers map, and a div which contains some information about elements that have been moused over on the map. The openlayers events trigger showing or hiding the div, but the div is not a part of the open layers map.

The problem that I am having is that the map layers stack in front of the div. I would prefer that they stack behind the div. I don't fully understand how openlayers stacking works, and there's no explanation in the documentation that I have found which explains stacking in the context of DOM elements that are not a part of the map.

Can anyone help me here? CSS and HTML follows. Openlayers exists on the map-id div.

HTML:

<div id="combat-contentBox">
     <div id="map-id"></div>
     <div id="ship-info" class="ui-widget hidden"></div>
     <div id="tileproperties"></div>
</div>

CSS:

#map-id {
    width: 761px; 
    height: 598px;
    float:left;
    margin:0;
    background-image:url('../../map/selfgraphics/background3.jpg');
    z-index: -25;
}

#ship-info {
    align: center;
    position: absolute;
    width: auto;
    bottom: 5px;
    z-index: 500;
    text-align: center;
    background: #000000 url(../../library/externallibraries/jqueryui/css/dark-hive/images/ui-bg_dots-small_25_000000_2x2.png) 50% 50% repeat;
    color: #ffffff;
    border: solid grey 1px;
    padding: 5px;
}

Like I said above, the openlayers vector layers from the map-id div stack over the ship-info div, but I am pretty sure that the map-id div itself is stacking behind the ship-info div, because the map-id background is stacking behind the ship-info div. Why is this and how can I bring the ship-info div in front of the open layers vector layers?

Thanks.

Solution

  • I finally found the answer. It's because the vectors are styled by the "map viewport" div which is created by the OpenLayers javascript. If you style the viewport's z-index, the layers will fall into place.

    div.olMapViewport {
     z-index: 0;
}