CSS:无法理解如何使用z索引

Question

首先，我是一名程序员(Python、C、Java、Delphi等等)，而不是web开发人员/设计师。我正在努力(当被问到的时候)，所以请容忍我。:-)

我有一张地图(div的背景图像)。在地图上我已经放置了一些城市(带有图像的div)。在城市下面是汽车(div with image也是如此)。每辆车都可以去任何城市(拖放，我正在做这件事)。城市和汽车，当点击一次时，会显示带有额外信息的弹出对话框。

到目前为止，还没有消息。一个正常的程序员想要的是在第一层(即z索引0)上的城市的地图，在下一层(即z索引10)的汽车上(z索引20，因为当拖放汽车时应该出现在城市上方，而不是低声)，最后在所有弹出窗口(z索引999)之上。

然而，事实并非如此。当汽车被拖动时，在一些城市上面“飞”，在另一些城市下面“通过”(我想，这取决于渲染页面时它们是放在城市之前还是放在城市后面)。

我试图在地图的div和城市(即z索引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索引，所以除非您定位所有的元素(不需要设置它们的top和left值，只需要设置它们的position值)，否则这可能会导致一些问题。

但是，由于您说这些元素在firebug中显示为z-index: auto，所以我怀疑有些地方出了问题。Z索引是否仅适用于jQuery？在这种情况下，看起来代码是在元素在页面上可用之前执行的。否则，请给我们一个重新创建此错误的js小提琴。

还要注意的是，使用jQuery draggables，您可以在拖动时更改它们的z索引：http://jqueryui.com/demos/draggable/#visual-feedback

Answer 2

已解决：

问题是，在插入地图上所有城市的{% for city in cities %}循环中，我创建了所有其他元素(汽车和弹出窗口)作为城市的子元素。这是令人困惑的，因为我不知道孩子从他们的父母那里继承了z索引(这是CSS中的“级联”)。现在，我将所有元素都设为#map元素的子元素，一切都很好。

感谢你们提供的信息。它的帮助超出了你的想象。

Answer 3

仅当更改项目的默认位置时，元素的z索引才会生效。我会推荐下面这样的东西。

.popup {
  position: relative;
  z-index: 10;
}

还要记住，DOM元素的顺序也会影响项目的位置。