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

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

提取相关代码并制作一个JSFIDLE可能需要一点时间，因此我发布了一些图片，希望有人能根据以下内容帮助我：

包含以下链接的

footer\u info

div：

包含图像的

页脚行0

div：

对于我的场景，以下链接不起作用：

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

我已经尝试为

footer\u info

设置

z-index:10

，但没有解决问题。如果我为

footer\u row\u 0

设置一个负的

z-index

值，该行将消失

footer\u info

computed 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;

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;

footer\u row\u 0

computed 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;

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;

---

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

在页脚信息中使用z索引和

位置

：

将此css添加到页脚信息中：

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

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

---

z-index处理了position属性。

好了，伙计们，花了1-2个小时，我终于找到了解决方案。首先，感谢@Breaked Heart的帮助，因为我的答案部分是基于他的。另外，我并不是为了得到分数或其他什么（我并不真的在乎他们），而是为了让其他人也能看到解决方案

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;
}

好的，我首先为footer\u infodiv应用了这个CSS：

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

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

对于小的剪影图像，我也有一个CSS类剪影。因此，我在CSS类中添加了以下内容：

.silhouette {
    z-index: 2;
}

---

通过这两个修改，我可以获得单击的链接，并且剪影图像也可以完全看到。

尝试过。两个问题：当我只应用

位置：绝对

，它将下面的所有元素向上移动，几乎完全填充

footer\u info

s空间。此时，两个div的内容都可见。当我应用

z-index:999！重要的

同样，

footer\u info

确实在前面，但它也会将

footer\u info

的白色背景带到前面，因此

footer\u row\u 0

内容（它们在背景中重叠，不再可见。@Ahmad尝试使用

位置：relative；

我找到了解决方案，并将其作为我自己的答案发布。但是谢谢你的帮助，因为你的答案让我开始了思考。