As a programmer versed in Python, C, Java, and Delphi, I am not a web developer or designer by trade. However, when required to fill those roles, I do my best; please be patient with me. :-)
I have created a map (with a background image as a div), where I've positioned cities (divs with images) and cars (also divs with images). The cars are draggable and can travel to any city (I'm currently working on the drag-and-drop functionality). Clicking on cities or cars triggers pop-up dialogs displaying additional information.
Thus far, nothing unusual. A typical programmer's desire would be to place the map at the lowest level (z-index 0), followed by cities (z-index 10), then cars (z-index 20 - so they appear above cities when dragged), and finally popups (z-index 999).
However, this order is not being maintained consistently - sometimes cars fly above certain cities and pass below others, depending on their rendering sequence on the page.
I attempted inserting a div (for drawing lines) between the map and cities (z-index 5), but without success.
The popups are also experiencing issues.
I also experimented with the following 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);
});
Unfortunately, no changes occurred, not even small improvements. To make matters worse, inspecting elements with Firebug revealed that all z-indices were set to 'auto'.
I acknowledge that I must be overlooking something crucial, leading to this chaos. I hope that my aversion to CSS isn't exacerbating the situation.