-1

この質問について非常に多くのトピックを見つけましたが、私の場合はどれも役に立ちません。

z-index が低い div が 1 つあります。その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_divz-index が -1 に設定されると、.fbクリックできなくなります。z-index = 1 を に設定すると#docked_div、.fbクリック可能に#docked_divなりますが、画像の上にあり、下にあるはずです。

例はここに見られます (FB ボタンはクリックできません): http://jsfiddle.net/vAkXh/7/ [ここで編集] 完全な例はここにあります: tax.allfaces.lv (ここで FB ボタンがクリック可能であることがわかります。しかし、それは画像の上にあり、正しくありません）。

4

1 に答える 1

-2

Just add to the #right div :

position: relative;
z-index: 2;

I tried on http://tax.allfaces.lv/, it should work.

于 2013-05-28T08:27:28.077 に答える