0

This is a longer story I'm trying to cut short. Generally I'm playing around with a website menu that is supposed to partly slide under a partly transparent background gif image, and fully reveal itself only upon mouseover. To do that, I'm using the z-index parameter on both the background image and the menu. But since you can't use z-index on a body background image, I'm using a "regular" image, which I'm setting to 100% width and height - AND for the z-index paramenter to work, I need to specify "position" as well. It seems though that with that combo, I'm basically creating an invisible shield that'll make all links untouchable. I've cooked it down to the following lines:

<style>
#style {
    position: absolute;
    width:100%;
    height:100%;
}
</style>

<div id="style"></div>
<a href="">test</a>

If you try this, you will see that the "test" link is unclickable (cross-browser).

Does anyone have an idea how I can solve this? Thanks!

Brokenstuff
  • 133
  • 6

4 Answers4

3
<style>
#style {
    background-color:#ccc;
    position: absolute;
    width:100%;
    height:100%;
}
a {position:relative} /*won't change position of the link, but shows link above.*/
</style>



<div id="style"></div>
<a href="#">test</a>
campino2k
  • 1,618
  • 1
  • 14
  • 25
0

I think setting a z-index, though it might work doesn't really address the problem but a kind of a hack that achieves what you want.

The root cause of unclickable links is mostly an element that is improperly positioned through floating, display, or position property. This element is displayed in the foreground of your link creating a shield that prevents you from clicking the link.

The solution to this I found is to use javascript/jquery to console.log or alert the id or class of the element in the foreground when you click.

$('*').click(function (){
   alert('class = ' + $(this).attr('class') + ' id = '+ $(this).attr('id')); 
});

above will alert the element in the foreground. Now that you know the cause look at its style.

qualebs
  • 1,291
  • 2
  • 17
  • 34
0
<style>
#style {
    position: absolute;
    width:100%;
    height:100%;
    z-index: -1;
}

.test {
    z-index: 99;
}
</style>

<div id="style"></div>
<a href="" class="test">test</a>

Will work too, along with campino2k's answer.

Logan Serman
  • 29,447
  • 27
  • 102
  • 141
0

Thanks for the replies, which pointed me in the right direction. It seems like the div does indeed create an invisible shield, and that shield is (more or less) inpenetrable when it comes to underlying links.

Click through a DIV to underlying elements

@Logan: I'm afraid that approach doesn't work for me. You're suggesting to simply raise the link above the div shield - that, however, defeats the original purpose I've described above (the one with the background image and the menu sliding underneath it).

@campino: I thought this was it, but adding a z-index definition to "style" broke it again. The fact that you colored the entire div field helped me understand what you obvously already knew: As long as the div is over the link, it's not clickable, period.

So all in all, I'm concluding that my approach doesn't work. For the actual project I'll probably cut up my asymmetric background image into several pieces, so the div doesn't cover the entire screen, and is only where I absolutely need it.

Community
  • 1
  • 1
Brokenstuff
  • 133
  • 6