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 to render css code from php var without page refresh?

    How do you create different CSS for dynamically generated elements?

    How to fix css and jQuery slide show? [closed]

    How slow is * css selector for mobile browsers?

    How to access an object from a webpage in selenium

    How to control the expandability of textarea from width perspective

    how does responsive design work?

    How to make content next to a fixed-position menu not overlap in smaller resolutions

    how to open specific div by class name onclick

    how can i change the css style on click with table

    How to add Indian rupee symbol to the RadioButtonList control in asp.net using CSS design

    How can I make a fixed div JUMP when scrolling?

    How to avoid double border from the multiple
  • How to assign CSS to mobile page in asp.net

    How can fixed element push content down the page using CSS only?

    How to position an image to the right of a center aligned title with HTML & CSS

    how to achieve this this horizontal line from css or bootstrap

    How to reload CSS after ajax call

    How do the Sass variables get assigned to CSS selectors with Foundation 4?

    How or where to add javascript settimeout function to CSS vertical drop down menu

    CSS dropdown menu not showing the full texts of submenu items

    How do I keep a mouse cursor from changing to 'selected text' in JQuery?

    Table: how to change pictures on mouseover on single rows?

    CSS: how to position element in lower right?

    How to prevent bootstrap css class to override my custom css class

    How do I make punch-through transparent text in HTML/CSS?

    How to use metro ui css sidebar and compact classes

    How to make multiple breaks using CSS?

    Symfony2: How to link CSS to HTML part?

    How to exclude CSS file from Visual Studio intellisense?