Question

我已经为这个问题找到了很多主题，但这些问题对我的情况都没有帮助。

我有一个低z-index的div。该div中有一个按钮，应该是可点击的。但由于z-index较低，因此无法点击。我试图改变其他div和容器的z-index，但我找不到合适的组合。

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;*/
}

我需要能够点击FB按钮。现在，当#docked_div z-index设置为-1时，.fb不可点击。如果我将z-index = 1设置为#docked_div，那么.fb是可点击的，但是#docked_div位于图片的顶部，它应该在。{/ p>

此处显示示例（FB按钮无法点击）：http://jsfiddle.net/vAkXh/7/ [编辑此处] 完整的例子在这里：tax.allfaces.lv（你可以看到这里FB按钮是可点击的，但它在图像的顶部，它不正确）。

Answer 1

只需添加到#right div：

position: relative;
z-index: 2;

我试过http://tax.allfaces.lv/，它应该有效。

具有低z-index的可点击区域

1 个答案: