Is z-index the only way to force an element to be positioned over top of another, if not what other methods are there?

Question

I'm working on an application with a map and there is a div in the corner with some stuff in it. You can click on this map to bring up some information in a little window. The window is, in some cases, being covered by the div in the corner.

I want the opposite effect (window covers div). I figured this would simply be a z-index issue but I'm unable to get it to work. This is with IE7 and from reading up a bit it seems like z-index won't work unless it's inside of an element that is positioned.

The elements seem to be positioned properly to get the z-index to work right but I'm having little luck. I've played around with adding styling via Firebug but haven't had any luck in getting anything to change. The window really is just two divs one absolutely positioned one and a relative one inside of it.

Is the z-index the only thing that could be the problem here or is there something else I don't know about?

Are there any other methods to achieve the effect I want? I cannot simply hide the div via jquery or something because part of it should be visible from behind the window that opens on the map.

Answer 1

You are hitting the stacking context bug

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Every positioned div in IE will create a new stacking context and prevent z-index from diferent stacking contexts to come on top of others.

The solution is to have the window you want on top up in the tree (into the body for example) and z-index value grater than z-index of all parents of the other div covering your window.

Extensive information to understand the problem here: http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

Answer 2

positioning and negative margins is the only way to get elements to overlap that i know of. z-index is just used to explicitly tell the browser how to layer the elements.

as to your problem, IE requires the container elements and/or elements that you are overlapping to have position:relative; or position:absolute; for z-index to work properly. When someone say positioning they're usually implying having the position property set in CSS. Also when working with z-index make sure that the overlapping elementa are at the same level with each other.

Hope this helps