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

【问题标题】：Setting link text in front of overlapping images?在重叠图像前设置链接文本？
【发布时间】：2013-09-16 09:01:17
【问题描述】：

我的网站有一个页脚，其中有链接，它们下方的图像，以及包含这些重叠的两个单独的 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，但并没有解决问题。如果我为footer_row_0 设置一个负的z-index 值，该行就会消失。

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;

谁能告诉我如何解决这个问题？

【问题讨论】：

标签： html css z-index overlap

【解决方案1】：

在 footer_info 中使用 z-index 和 position:

在 footer_info div 中添加这个 css：

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

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

【讨论】：

试过了。两个问题：当我只应用position: absolute; 时，它会将下面的所有元素向上移动，几乎完全填满了footer_infos 的空间。此时两个 div 的内容都是可见的。当我也申请z-index:999 !important; 时，footer_info 确实在前面，但它也将footer_info 的白色背景也带到了前面，所以footer_row_0 内容（在背景中重叠，不再可见.
@Ahmad 试试position: relative;
我找到了解决方案，并将其发布为我自己的答案。但是感谢您的帮助，因为您的回答让我开始了。

【解决方案2】：

好的，伙计们，在花了 1-2 个小时后，我设法找到了解决方案。首先，感谢@Broken Heart 的帮助，因为我的回答部分基于他的。另外，我不是为了获得积分或其他东西而做出自己的答案（并不真正关心它们），但我只是这样做，以便其他人也坚持这个问题可以看到解决方案是什么。

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

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

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

.silhouette {
    z-index: 2;
}

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

【讨论】：

【解决方案3】：

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

【讨论】：