使用后期，图像地图区域应该覆盖绝对定位的图像。

Question

对于有待开发的页面，我正在尝试将jQuery/jQueryUI函数和插件("draggable“和”map突显“)与通过单击jQuery添加和删除类触发的图像映射和CSS动画缩放结合起来：

这太多了，所以我创建了一个代码库：

http://codepen.io/anon/pen/xqxgrz

我在另一个容器(#container3)中有一个可拖动区域(#container3)，它隐藏任何溢出(拖动它以查看效果)。

在#container3内部还有一个容器(#container4)，它包含四个图像。这些都是绝对定位，三个较小的是在顶部的一个，填补整个容器时，装载。所有这些容器嵌套是必要的，以获得拖动能力，使用图像地图和缩放。

现在最重要的是:所有的图像或多或少都被地图区域所覆盖。当你在(而不是在)小图像上盘旋时，这些图像就会变得可见。当单击标记为“收缩”的图像周围的区域时，从#container4向下向下的所有元素(即容器本身、4个图像和地图区域)将被缩小到初始大小的60%，这是由jQuery与CSS动画结合添加的CSS类造成的。当点击“重置”周围的区域时，所有的东西都会被重置到原来的大小(但是如果它以前被拖动过的话，就不会恢复到原来的位置)。

我的问题是，当我盘旋时，地图区域无法覆盖这些小图像。我尝试了这个CSS (以及其他版本的CSS)，但是不管我使用哪个z索引，它都没有效果：

#container4 area {
  position: absolute;
  z-index:10000;
}

但是地图区域仍然在(小的)图像后面--点击图像本身没有效果，尽管它应该被可点击的图像地图所覆盖。

我稍后的意图是拥有比图像更小的真实图像和多边形地图区域，并且只覆盖这些图像的一部分(它们所显示的东西的形状)，因此将jQuery addClass函数分配给图像本身并不是一种选择。

当我在图像上盘旋时，我能做些什么使这些区域在图像上面？

Answer 1

所以，在搜索了几天并尝试了我所能想到的一切之后，回答了我自己的问题：

使其工作的唯一方法是将每个图像放在自己的div容器中，并为每个图像创建一个独立的图像映射。这需要更多的代码，但它可以工作。