CSS:无法理解如何使用z-index

Question

首先,我是程序员(Python,C,Java,Delphi等),而不是Web开发人员/设计师.我很努力(当被问到时)所以请耐心等待.:-)

我有一张地图(div的背景图片).在地图上我放置了一些城市(div与图像).在城市下面有汽车(div也有图像).每辆车都可以前往任何一个城市(拖放,我现在正在努力).点击一次时,城市和汽车会显示带有额外信息的弹出对话框.

到此为止,没有新闻.普通程序员想要的是将地图放在下一个(即z-index 10)汽车的第一级(即z-index 0)城市上(z-index 20因为当拖放的汽车应该出现时)在城市之上而不是在下面)并且最后是所有弹出窗口(z-index 999).

然而,这种情况并非如此.汽车在某些城市上方"飞行"并在其他城市之下"通过"(取决于它们是在城市之前还是之后放置,而我们在渲染页面时).

我正在努力在地图div和城市之间放置一个div(绘制线条)(即z-index 5),但无济于事.

弹出窗口也有问题.

我也试过这段代码:

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);
}); 

仍然没有任何变化(甚至没有一点点进展).没有.最糟糕的是,在使用Firebug进行检查时,我得到了z-index: auto;所有这些元素.

我知道我必须做一些完全错误的事情,但它是什么？我希望我对CSS的厌恶不会导致所有这些混乱.

Answer 1

定位元素(绝对或相对)将始终具有比其他元素更高的z-index,因此除非您定位所有元素(您不需要设置它们的值top和left值,只是它们的position值),这将是一个可能的原因一些问题.

但是,既然你说这些元素出现z-index: auto在firebug中,我怀疑其他错误.z-index是否仅适用于jQuery？在这种情况下,看起来代码是在页面上的元素可用之前执行的.否则,请给我们一个js小提琴重新创建此错误.

另请注意,使用jQuery draggables,您可以在拖动z-index时更改它们:http: //jqueryui.com/demos/draggable/#visual-feedback