Html 在执行位置：绝对时，使div图像可单击

我需要把我的网站皮肤上有一个336x768px的图像在左侧的主要内容区域和另一个图像在右侧的主要内容区域

我能够正确定位，但无法使图像可点击。我相信这与容器的z指数有关，但我没有运气调整它们

我创建了一个JSFIDLE来演示和显示我的代码：

点击左边和右边的图片，你应该是在点击谷歌/雅虎的链接

CSS：

.site-skin {
    width: 96px;
    height: 76px;
    position: absolute;
    z-index: -1;
}

#skin-right {
    right: 0;
}

#main-container {
    width: 96px;
    height: 60px;
    margin: auto;
}

HTML：

<div class="site-skin">
      <a href="http://google.com">
          <img src="http://placehold.it/96x76">
      </a>
  </div>

  <div class="site-skin" id="skin-right">
      <a href="http://yahoo.com">
          <img src="http://placehold.it/96x76">
      </a>
  </div>

  <div id="main-container">
      main content
  </div>​

主要内容
​

您需要一个正的z索引值。这应该行得通

---

为什么要使用负z指数？那是你的问题。让它们成为非负的，它们就能正常工作

---

请注意，允许使用负z索引值，但是由于

#主容器

没有z索引集，它默认为零，并且实际上位于页面侧面的其他div的顶部。如果您在

#主容器

上设置一个较低的负z索引（并将其定位），这也会解决您的问题，尽管在我看来，将现在的负z索引更改为正z索引更有意义。

的确如此。我从来没有意识到负z指数有这种影响