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

Question

首先，我是一名程序员(Python、C、Java、Delphi 等)，而不是网络开发人员/设计师。我正在努力成为(当被问到时)所以请多多包涵。 :-)

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

到目前为止，还没有消息。普通程序员想要的是将 map 放在第一层(即 z-index 0)上，城市放在下一层(即 z-index 10)上，汽车放在下一层(z-index 20，因为当拖放汽车应该出现时在城市之上而不是在下面)，最后在所有弹出窗口之上(z-index 999)。

然而事实并非如此。汽车在某些城市上方“飞行”并在其他城市下方“通过”(我想这取决于它们在渲染页面时是放置在城市之前还是之后)。

我试图在 map div 和城市(即 z-index 5)之间放置一个 div(绘制线条)但无济于事。

弹窗也有问题。

我也试过这段代码:

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 值)，这将是一些问题的可能原因。

但是，由于您是说元素在 Firebug 中显示为 z-index: auto，所以我怀疑还有其他问题。 z-index 是否仅适用于 jQuery？在这种情况下，看起来代码是在页面上的元素可用之前执行的。否则，请给我们一个 js fiddle 来重现这个错误。

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