Openlayers overlay on top of custom buttons

Question

So I have an openlayers map, which has a couple of custom buttons that are absolutely positioned in the top right corner. I also have an openlayers Overlay that appears when clicking on some points in the map. I want the Overlay to always appear on top of my buttons. But the buttons always appear on top. Code is something like this:

<div id="map">
   <button /> <----button that is absolutely positioned 
   <div id="popup">
</div>

I create an Overlay and reference my popup div. Everything works fine with the overlay, except I want it on top of the other dom elements that are children of my map div.

The style on the ol-overlay-container-stopevent is z-index: 0. In the dev tools if I update the z-index to 1 then my popup appears on top of my buttons like I would like. Maybe the solution is to add in custom styles for this container, but is there any way to do this other than trying to override the css?

Answer 1

It appears what I need to do is create an ol Control class and reference my button in the element argrument. Then I add that to the map and it gets added inside of the viewport. I then specify insertFirst: false on the popup Overlay and it now will appear on top of my buttons.