OpenLayers - HTML DIV overlay

Question

I'm using OpenLayers to display a map on a standard HTML page, and I want to create a div that sits on top of the map. However, the div always seems to be obscured by the map tiles.

I believe there is a way to add elements to the map itself, but in this case that isn't a viable option since the div will potentially float partially over the map, and partially over other page elements.

<div id="maphost" style="width: 100%; height: 100%" />
<div id="overlay" />

That is the basic HTML. What CSS values do I need to add to either DIV to make this possible?

score 10 · Accepted Answer · edited Jan 23 '12 at 21:45

10

add a z-index

<div id="maphost" style="width:100%; height:100%; z-index: 0"></div>
<div id="overlay" style="z-index:9999"></div>

edited Jan 23 '12 at 21:45

capdragon

14,565
24
107
153

answered Aug 10 '11 at 13:07

Ilia Choly

18,070
14
92
160

It doesn't appear to make a difference. – Barguast Aug 10 '11 at 13:13
Scratch that, yes it does. Thanks! – Barguast Aug 10 '11 at 13:14

score 5 · Answer 2 · answered Jan 23 '12 at 21:17

5

Another internal method for doing it is to use this css:

div.olMapViewport {
     z-index: 0;
}

answered Jan 23 '12 at 21:17

the_skua

1,230
17
30

Both answers +1 as they work great. Personally I prefer this one. BTW do you guys, the_skua or @ilia choly, have any idea where does the viewport takes/gets its `z-index` set to something greater than 0, as div.olMap has `z-index`set to 0? – Boro Jul 17 '12 at 10:25
Don't know. Sorry I can't be of more help. – the_skua Jul 17 '12 at 19:37
1

This is not a safe solution as if the zIndex is defined in javascript by OpenLayers now or in the future, the css will be ignored... – Karl.S Oct 22 '14 at 18:34

score 0 · Answer 3 · answered Jan 26 '21 at 19:14

0

edit this as needed

  <div id="search" style="position: absolute; top: 10px; right: 10px; padding: 5px; background-color: rgba(255,255,255,0.5);">
  <input type="text" placeholder="Search photos by tag(s)" style="width: 200px">
  <button type="button">Search</button>

answered Jan 26 '21 at 19:14

snack overflow

145
10

Please explain why and how this will solve the issue – phoenixstudio Jan 26 '21 at 19:40

OpenLayers - HTML DIV overlay

3 Answers3

Linked