Is there a way to have element behind a div (links) clickable in areas where the div is "transparent
Posted
by Adam
on Stack Overflow
See other posts from Stack Overflow
or by Adam
Published on 2010-05-01T12:02:28Z
Indexed on
2010/05/01
12:07 UTC
Read the original article
Hit count: 136
I have a block element that is positioned absolutely and some other elements on page that are positioned fixed. The effect is the block on top floats over the page which works well.
The links in the elements at the bottom underneath are not clickable. They shouldn't be when the content of the div is over them, but when the "marginal" areas which are transparent are over the links they are visible, but clicks only register to the covering div.
The problem only happens when the padding covers the div. But if I just rely on the margin the bottom margin is ignored by browser so the scroll doesn't go high enough up. To solve this I resort to padding at the bottom. This is the problem.
Is there a clean way around this? I realize I could have the underneath elements doubled and place on top, but opacity set to 0. That is an undesirable solution however.
Sample of the problem:
<!DOCTYPE html>
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<style>
#top, #bottom {
position: fixed;
border: 1 px solid #333;
background-color: #eee;
left: 100px;
padding: 8px;
}
#top {
top: 0;
z-index: 1;
}
#bottom {
bottom: 0;
z-index: 2;
}
#contentWrapper {
position: absolute;
margin: 100px 0 0 0;
/* Padding is used to make sure the scroll goes up further on the page */
padding: 0 0 100px 0;
width: 600px;
z-index: 3;
}
#content {
border: 1 px solid #333;
background-color: #eee;
height: 1000px;
}
</style>
</head>
<body>
<div id='top'><a href="#">Top link</a></div>
<div id='bottom'><a href="#">Bottom link</a></div>
<div id='contentWrapper'>
<div id='content'>Some content</div>
</div>
</body>
</html>
© Stack Overflow or respective owner
