在重叠图像前设置链接文本？

Question

我的网站有一个页脚，其中有下面的图像链接，以及包含这些重叠的单独div。图像和链接重叠的地方，链接不可点击。

提取相关代码并制作JSFiddle可能需要一点时间，所以我发布图像，我希望有人可以根据这些来帮助我：

包含链接的footer_info div：

包含图片的footer_row_0 div：

对于我的方案，以下链接不起作用：

Privacy Policy
Terms & Conditions
Site Map
Affiliates
Specials
Wish List
Newsletter

我已经尝试为z-index: 10设置footer_info，但它没有解决问题。如果我为z-index设置了负footer_row_0值，则该行会消失。

footer_info计算CSS：

background-color: rgb(255, 255, 255);
background-image: none;
background-position: 50% 0%;
background-repeat: no-repeat;
clear: both;
color: rgb(84, 84, 84);
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 12px;
height: 149px;
line-height: 18px;
margin-bottom: -75px;
overflow-x: auto;
overflow-y: auto;
padding-bottom: 20px;
padding-left: 0px;
padding-right: 0px;
padding-top: 20px;
width: 980px;
z-index: auto;

footer_row_0计算CSS：

color: rgb(224, 224, 224);
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 12px;
height: 150px;
line-height: 18px;
position: relative;
width: 980px;
z-index: 0;

有人可以告诉我如何解决这个问题吗？

Answer 1

在 footer_info 中使用带有position的z-index：

在 footer_info div：

中添加此css

position: absolute;
z-index:999 !important;

z-index与position属性一起使用。

Answer 2

footer_info {
  background-color: rgb(255, 255, 255);
  background-image: none;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  clear: both;
  color: rgb(84, 84, 84);
  position: relative; /* or absolute */
  display: block;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 12px;
  height: 149px;
  line-height: 18px;
  margin-bottom: -75px;
  overflow-x: auto;
  overflow-y: auto;
  padding-bottom: 20px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 20px;
  width: 980px;
  z-index: 9999;

footer_row_0 {
  color: rgb(224, 224, 224);
  display: block;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 12px;
  height: 150px;
  line-height: 18px;
  position: relative;
  width: 980px;
  z-index: 1;
}

Answer 3

好吧，伙计们，花了1-2个小时后，我找到了解决方案。首先，感谢@Broken Heart的帮助，因为我的回答部分基于他的。此外，我没有自己的答案来获得积分或其他东西（不关心它们），但我只是这样做，所以其他人也坚持这个问题可以看出解决方案是什么。< / p>

好的，所以我首先将此CSS应用于 footer_info div：

#footer_info {
    z-index: 1 !important;
    position: relative;
}

对于小型轮廓图像，我也有一个CSS类轮廓。所以我将以下内容添加到 silhouette CSS类：

.silhouette {
    z-index: 2;
}

通过这两个修改，我能够获得点击链接，并且完全可以看到轮廓图像。