执行位置时使 div 图像可点击：absolute答案

【问题标题】：Make a div image clickable when doing position: absolute执行位置时使 div 图像可点击：absolute
【发布时间】：2012-10-02 13:26:54
【问题描述】：

我需要在我的网站上放置一个网站皮肤，其中主要内容区域的左侧有一个 336x768 像素的图像，而主要内容区域的右侧有另一个图像。

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

我创建了一个 jsfiddle 来演示和展示我的代码： http://jsfiddle.net/puTEe/

通过点击左右图像，您应该点击了指向 google/yahoo 的链接。

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>

【问题讨论】：

标签： html css

【解决方案1】：

为什么要使用负 z-index？那是你的问题。使它们成为非负数，它们可以正常工作。

请注意，负 z-index 值是允许的，但是由于您的 #main-container 没有设置 z-index，它默认为零并且实际上位于页面侧面的其他 div 之上。如果您在#main-container 上设置较低的负 z-index（并定位它），这也将解决您的问题，尽管在我看来，将您现在拥有的负 z-index 更改为正数更有意义。

【讨论】：

确实如此。从来没有意识到负 z-index 有这种效果

【解决方案2】：

您需要有一个正的 z-index 值。这应该有效。

working version

【讨论】：