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

Question

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

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

包含链接的 footer_info div:

包含图像的 footer_row_0 div:

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

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

我已经尝试为 footer_info 设置 z-index: 10，但并没有解决问题。如果我为 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;

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

Answer 1

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

在 footer_info div 中添加此 css:

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

z-index 与 position 属性一起工作。