0

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

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

包含链接的footer_infodiv：

在此处输入图像描述

包含图像的footer_row_0div：

在此处输入图像描述

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

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

我已经尝试设置z-index: 10for 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;

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

4

3 回答 3

1

在footer_info中使用 z-index 和position：

在footer_info div中添加这个 css ：

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

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

于 2013-09-16T09:06:57.867 回答
1

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

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

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

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

.silhouette {
    z-index: 2;
}

通过这两个修改，我能够获得点击链接，并且剪影图像也完全可见。

于 2013-09-19T12:26:52.620 回答
0 
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;
}
于 2013-09-16T09:15:28.917 回答