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

Question

Edit to reopen:

It seems to be difficult to position elements over a google map. Using z-index does not solve the problem which is described below: Google Maps will stay on top of some other elements even when using high z-indexes.

The question is:

Is it possible to have a div cover parts of a google map?

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

How to force something to be the top most, always displayed object on screen?

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?

What is the z-index for the map and the z-index for the popup? — Si8, Sep 10 '13 at 21:51
@SiKni8 MAP: -webkit-transform: translateZ(0); popup: z-index: 100000; — jordan, Sep 10 '13 at 21:54
A lot of people complains about code not working properly in different browser. Not that your code is wrong but different browser interprets certain markups differently. Try in IE and FF and let us know what happens. — Si8, Sep 10 '13 at 22:04
Is your popup' position: static, absolute, or relative? [z-index is ignored](http://stackoverflow.com/questions/8486475/why-is-z-index-ignored-with-positionstatic) if it is static or not set. — Joe, Sep 10 '13 at 22:38
position relative and z index set to 999999999999999999999999999999999999999999999999999. in chrome. still hidden behind map — jordan, Sep 12 '13 at 15:55
Have you found the solution yet? Same problem here in Chrome — Lex Podgorny, Aug 21 '14 at 22:45
@LexPodgorny No sir, no answer yet. What I think was going on, was that the bid was a child div of the grid. If I had to retry this, i would set the menu div out side of everything else, and position it by absolute values where I needed it, then if the screen was resized, i would have to re calculate where to put it. — jordan, Sep 02 '14 at 20:09
@jordan.peoples yes google led me right here so thought I'd add a link for followers in case they want to see more related answers :) — rogerdpack, Oct 14 '16 at 15:48

GotBatteries · Accepted Answer · 2019-12-11T07:45:48.107

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

Edit: Adding a quote from the link for quick clarification:

First of all, z-index only works on positioned elements. If you try to set a z-index on an element with no position specified, it will do nothing. Secondly, z-index values can create stacking contexts, and now suddenly what seemed simple just got a lot more complicated.

Adding the z-index for the element via jQuery, gives the element different stacking context, and thus it tends to work. I do not recommend this, but try to keep the html and css in a such order that all elements are predictable.

The provided link is a must read. Stacking order etc. of html elements was something I was not aware as a newbie coder and that article cleared it for me pretty good.

Reference philipwalton.com

score 16 · Answer 2 · edited Nov 17 '16 at 12:52

16

Try setting position to absolute, ie.

#yourDiv{
    position: absolute;
    z-index: 10;
};

edited Nov 17 '16 at 12:52

Nisse Engström

4,738
23
27
42

answered Dec 28 '14 at 00:18

Paul G

829
7
11

score 14 · Answer 3 · answered Sep 10 '13 at 23:18

14

Are you using position: relative?

Try to set position: relative and then z-index because you want this div has a z-index in relation with other div.

By the way, your browser is important to check if it working or not. Neither IE or Firefox is a good one.

answered Sep 10 '13 at 23:18

Hugo Sousa

906
2
9
27

4

position relative and z index set to 999999999999999999999999999999999999999999999999999. in chrome. still hidden beihind map – jordan Sep 12 '13 at 15:55
2

Have you found a solution yet? Having the same problem in Chrome – Lex Podgorny Aug 21 '14 at 22:44
@DivisionbyZero - I never did find a proper fix for my specific implementation, but I gave the "correct answer" to GotBatteries. Check it out, hope it helps. – jordan Oct 18 '17 at 16:06

score 8 · Answer 4 · answered Dec 23 '15 at 19:01

8

you should use position:fixed to make z-index values to apply to your div

answered Dec 23 '15 at 19:01

Phaneendra Charyulu Kanduri

474
7
19

1

Not just position:fixed, but ALL positions. Just to be clear – LOTUSMS Dec 23 '15 at 20:17
i've said for any div to be appear in any depth – Phaneendra Charyulu Kanduri Dec 24 '15 at 04:40
All positions, except the default `static`. To be clearer! – gdbj Oct 24 '16 at 19:14

score 5 · Answer 5 · edited May 19 '16 at 15:37

5

Set the DIV's z-index to one larger than the other DIVs. You'll also need to make sure the DIV has a position other than static set on it, too.

CSS:

#someDiv {
    z-index:9; 
}

Read more here: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

edited May 19 '16 at 15:37

TylerH

20,799
66
75
101

answered Sep 11 '13 at 00:19

Jason

185
1
9

4

position relative and z index set to 999999999999999999999999999999999999999999999999999. in chrome. still hidden behind map. – jordan Sep 12 '13 at 15:56
@jordan.peoples try to put z-index in both divs but the one on top should get the higher one – Mawardy May 02 '16 at 14:36
Me same! position relative and z index set to 999999999999999999999999999999999999999999999999999. in chrome. still hidden behind map. @jordan – Chen-CN Jan 10 '20 at 20:57
@Chen-CN I never did find a proper solution to this - we were using a third party developed site as a code base and they sucked at coding. Eventually I think it was determined the page was split into two panes or windows or something, so anything created in one section had to live there - so we ended up shit canning this code and making the popup a child of the map, or something like that – jordan Jan 11 '20 at 16:40

score 0 · Answer 6 · edited Feb 11 '21 at 14:48

One form to do this is insert the panel that you want to expand inside a DIV setted as relative: let me show you:

<div style="position:relative">
  <div style="position:absolute; z-index: 1000;">
    your code
  </div>
</div>

You use the first div to position the inner content in a specific area inside your page and the second absolute should be referred to the container (because is relative) The z-index in this case is referred also to container and if it higher that the container should be at top. You can put the style in a CSS class and change the size of the absolute div to expand it on hover or another action that you want to control.

I hope that this help

score -1 · Answer 7 · answered Sep 11 '15 at 03:20

-1

dropdowns always show up on top, only solution for this problem is to hide dropdowns when image is displayed (display:block or visibility:visibile) and show them when image hidden (display:none or visibility:hidden)

answered Sep 11 '15 at 03:20

Faisal Ameer

416
5
13

can you -1, z-index or any other technique cant keep dropdowns in background, only way is to hide them when you want to show something over, – Faisal Ameer Oct 27 '15 at 05:20

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

7 Answers7