jordan.peoples jordan.peoples - 11 months ago 49
CSS Question

How to make a Div appear on top of everything else on the screen?

I have the following popup:

enter image description here

But when i move this popup up to appear over the map, it gets hidden:

enter image description here

I have tried setting the z-index on my CSS property sheet, but this did not work.

Is there some HTML/CSS property i can set so that the popup, which is a DIV, actually always sets on top of everything else?

Answer Source

z-index is not that simple friend. It doesn't actually matter if you put z-index:999999999999..... But it matters WHEN you gave it that z-index. Different dom-elements take precedence over each other as well.

I did one solution where I used jQuery to modify the elements css, and gave it the z-index only when I needed the element to be on top. That way we can be sure that the z-index of this item has been given last and the index will be noted. This one requires some action to be handled though, but in your case it seems to be possible.

Not sure if this works, but you could try giving the !important parameter too:

#desired_element { z-index: 99 !important; }