Setting link text in front of overlapping images? - html

Question

I have a footer for my website, in which there are links which images below them, and both separate divs containing these overlap. Where the images and links overlap, the links are not-clickable.
Extracting the relevant code and making a JSFiddle out of it might take a little time, so I'm posting images, and I hope someone can help me out based on these:
The footer_info div containing the links:
The footer_row_0 div containing the images:
For my scenario, the following links do not work:
Privacy Policy
Terms & Conditions
Site Map
Affiliates
Specials
Wish List
Newsletter
I already tried setting z-index: 10 for footer_info, but it didn't solve the problem. And if I set a negative z-index value for footer_row_0, the row disappears.
footer_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;
footer_row_0 computed 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;
Can someone tell me how to solve this issue ?

Answer 1

In the footer_info use the z-index with the position:
Add this css in the footer_info div:
position: absolute;
z-index:999 !important;
z-index worked with the position property.

Answer 2

Alright guys, after spending 1-2 hours on this, I've managed to find the a solution. Firstly, thanks to #Broken Heart for his help, because my answer is partially based on his. Also, I'm not making my own answer to get points or something (don't really care about them), but I'm only doing so, so that other people also stuck on this issue can see what the solution was.
Okay, so I firstly applied this CSS for footer_info div:
#footer_info {
z-index: 1 !important;
position: relative;
}
For the small silhouette images, I had a CSS class silhouette too. So I added the following to silhouette CSS class:
.silhouette {
z-index: 2;
}
With these two modifications, I was able to get the links to click, and the silhouette images were also fully seen.

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