z-index较低的可点击区域

-1

我发现这个问题的题目很多，但没有一个对我的案例有帮助。z-index较低的可点击区域

我有一个低Z指数的股利。该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位于图像的顶部，它应该在下面。

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

来源

2013-05-28 renathy

为了使z-index起作用，元素必须具有非静态的位置。也就是说，您必须为elemnt设置位置属性。正如我在你的.fb类中看到的，你只提供了z-index而不是position：relative/absolute。 –

似乎为我工作正常（在铬），但我会增加'docked_div'的Z指数 – Pete

我没有得到你需要的东西:( – HADI

-2

只需添加到#right DIV：

position: relative; 
z-index: 2;

我试过http://tax.allfaces.lv/，它应该工作。

来源

2013-05-28 08:27:28 FLX

请你能解释一下吗？该属性应该转到内部'div'还是转到内容'div'（停靠）？因为如果我将此属性应用于'＃docked_div'，我无法点击图标......没有此属性，我可以。 – Arkana

如果您需要点击另一个div，此属性非常有用。我不知道它是否适用于容器。但是，恕我直言，你有一个概念问题。你不应该有负Z指数。如果你不能改变，但是想要强制你的元素处于最佳状态，那么添加一个绝对位置的相对位置并将！important添加到z-index中。（z-index：1！important;） – FLX

FC：你能解释一下更多的元素来添加“相对绝对位置”。我需要#docked_div在#right div下（这是由于设计问题 - 设计师创建了一个设计，因此该div的左边距应该在#right div之下）。下面是一个网站：tax.allfaces .lv（你可以看到现在的div是可点击的，但它在图像的顶部，它不是正确的（） – renathy

z-index较低的可点击区域

回答

相关问题