Question

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

我能够正确定位，但我无法使图像可以点击。我相信它与容器的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>

Answer 1

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

只需注意，允许使用负z-index值，但由于您的#main-container没有设置z-index，因此默认为零，并且实际上位于页面侧面的其他div之上。如果你在#main-container上设置一个较低的负z-index（并定位它），这也可以解决你的问题，虽然在我看来，将你现在所拥有的负z-index更改为正的z-index更有意义。

Answer 2

您需要具有正z-index值。这应该工作。

working version

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

2 个答案: