CSS: can't understand how to work with the z-index

Tags: jquery,html,css,z-index

Problem :

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:

   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.

Solution :

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

    CSS Howto..

    How do I change image on hover of that the img is in - in jQuery?

    How to create a Twitter Bootstrap Textarea

    How to displaying and hiding again the div after clicking a button

    Force browsers load CSS before showing the page

    How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

    How can I :hover over different links in one line while getting the spacing correct?

    How to apply css and elemental styles to a ASP.net MVC 3 Web Application

    How to set border between two products in css?

    How to dynamically change element alignment?

    How to align a paragraph to center of cell in table

    How to avoid line breaks inside `->` operator in `` blocks?

    How to use a hover css pseudo to apply only to the top level element?

    How to hide CSS background images that use !important

    How do I find out if a CSS class exists in a StyleSheet? [duplicate]

    How to create a pop-up div on mouse over and stay when click

    How to disable custom animations from click, angular?

    How do I set the width and height of a textarea using CSS?

    How to style multiples of 3 li elements [duplicate]

    How to apply a defined class to a new class in my css?

    Given an url, how could a script find what resources are loaded?

    Once nav bar reached top of window, how to keep it there?

    How to make div layer unselectable in jquery and css

    Rails How to include a scss file in a specific erb view? [duplicate]

    How to make divs that automatically wrap to the next row

    How to position a vertical menu as nested
      under horizontal parent

    How to avoid css overlapping?

    How do I get
    margin working?

    How to style nested ID-elements in CSS/SASS

    How to set dynamic responsive divs with only CSS (no javascript)?

    jQuery slideDown() moves everything below downwards. How to prevent this?