Question

First of all I am a programmer (Python, C, Java, Delphi, whatever) and not a web developer/designer. I am trying hard to be (when asked) so please bear with me. 🙂

I have a map (background image of div). On the map I have placed some cities (div with image). Underneath the cities there are cars (div with image, too). Each car can travel to any city (drag-drop, I am working on this now). Cities and cars, when clicked-once, show pop up dialogs with extra information.

Up to here, no news. What a normal programmer would want is to have the map on the first level (i.e. z-index 0) cities on the next (i.e. z-index 10) cars on the next (z-index 20 because when dragged and dropped cars should appear above the cities and not bellow) and finally above all the popups (z-index 999).

However this is not the case. Cars when dragged “fly” above some cities and “pass” below some other (depending if they were placed before or after the city while rendering the page, I suppose).

I was trying hard to place a div (to draw lines) in between the map div and the cities (ie z-index 5) but to no avail.

Popups also have problems.

I also tried this piece of code:

jQuery(document).ready(function(){
   map_zindex = $("#map").css("z-index");
   $(".city").css("z-index", map_zindex+10);
   $(".car").css("z-index", map_zindex+100);
   $(".popup").css("z-index", map_zindex+200);
}); 

Still nothing changes (not even a small progress). Nothing. Worst of all, when checking with Firebug I was getting a z-index: auto; to all of those elements.

I know I must be doing something completely wrong, but what is it? I hope my dislike for CSS is not causing all this mess.

Answer 1

Positioned elements (absolutely or relatively) will always have a higher z-index than other elements, so unless you position all your elements (you don’t need to set their top and left values, just their position value), this will be a possible cause of some problems.

However, since you’re saying the elements show up as z-index: auto in firebug, I suspect something else is wrong. Is the z-index applied only with jQuery? In that case, it looks like the code is being executed before the elements are available on the page. Otherwise, please give us a js fiddle recreating this error.

Also note that with jQuery draggables, you can alter their z-index as they are dragged:
http://jqueryui.com/demos/draggable/#visual-feedback