I have found so many topics for this question, but none of those helps for my case.
I have one div with low z-index. There is a button in that div, that should be clickable. But it is not clickable, because of low z-index. I have tried to change z-index for other divs and containers, but I could not find out the right combination.
HTML:
<div id="wrapper">
<div id="content">
<div id="left"> <a href="/" id="logo"> </a>
</div>
<div id="right">
<div id="content_img">
<img src="http://tax.allfaces.lv/templates/tax/images/office.png">
</div>
</div>
<div id="docked_div">
<div class="fb"> <a href="http://www.facebook.com/cityrefund"><img src="http://tax.allfaces.lv/templates/tax/images/f.png" style="width:27px; height: 28px; padding-left: 20px;"></a>
</div>
</div>
</div>
</div>
CSS:
#wrapper {
margin: 0 auto;
margin-top: 10px;
width: 1004px;
position: relative;
}
#content {
overflow: hidden;
background-color: white;
}
#left {
float: left;
width: 249px;
}
#right {
float: left;
width: 750px;
padding-left: 5px;
}
#logo {
background: url(../images/logo.png) no-repeat;
background-position:center;
width: 250px;
height: 135px;
padding: 5px 0 0 5px;
display:block;
}
#content_img {
width: 750px;
height: 300px;
}
#docked_div {
background: url(http://tax.allfaces.lv/templates/tax/images/mazais_fons.png) no-repeat;
width: 52px;
height: 212px;
background-size: 100% auto;
position: absolute;
right: -37px;
top: 105px;
z-index: -1; **//EDIT HERE!!!!!!!**
}
.fb {
/*z-index: 1000;*/
}
I need to be able to click on FB button. Now when #docked_div z-index is set to -1, then .fb is not clickable. If I set z-index = 1 to #docked_div, then .fb is clickable, but then #docked_div is on top of the image, it should be under.
Example is seen here (FB button is not clickable): http://jsfiddle.net/vAkXh/7/ [edit here] The full example is here: tax.allfaces.lv (you can see that here FB button is clickable, but it is on top of image, it is not correctly).