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   But when i move this popup up to appear over the map  it gets hidden   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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Try setting position to absolute  ie       yourDiv      position  absolute      z-index  10

User · Answer

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

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

Examples related to css

Examples related to html

Examples related to z-index

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

Examples related to css

Examples related to html

Examples related to popup

Examples related to z-index