当带有绝对位置的div添加时无法点击链接 [英] when div with absolute position is added cannot click on links

问题描述

我有一个页面上的菜单和div是绝对定位。问题是，当这个div在一个页面上，然后我不能点击菜单项中的任何链接。

I have menu on a page and div that is absolute positioned. The problem is that when this div is on a page, then I cannot click on any links in menu items.

当我删除此div（#left_border）时，可以再次点击链接。

When I remove this div (#left_border), then links are clickable again.

为什么？

CSS：

 #left_border {
    background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 1094px;
    background-size: 100% auto;
    position: absolute;
    height: 850px;
    left: -51px;
   top: 0px;
}  

HTML：

<div id="wrapper">
<div id="content">
    <div id="left_border"></div>
    <div id="left">
        <div id="menu">
            <ul class="menu">
                <li class="item-101 current active deeper parent"><a href="/">Home</a>

                    <ul>
                        <li class="item-107"><a href="/index.php/home/news">News</a>

                        </li>
                    </ul>
                </li>
                <li class="item-102 deeper parent"><a href="/index.php/merchants-shops">Merchants / Shops</a>
                </li>                    
            </ul>
        </div>
    </div>       
</div>

无法点击菜单项： http://jsfiddle.net/Dq6F4/

推荐答案

添加 z-index：-1; 这将允许点击链接。因为The Div绝对位于链接上，因此不允许可点击。

Add a z-index:-1; This will allow the links to be clicked. As The Div is absolutely positioned over the links and hence it is not allowing clickability.

 #left_border {
    background-image: url(http://tax.allfaces.lv/templates/tax/images/ena.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 1094px;
    background-size: 100% auto;
    position: absolute;
    height: 850px;
    left: -51px;
   top: 0px;
    z-index:-1;
}  

这是工作解决方案。

希望这有助于。

这篇关于当带有绝对位置的div添加时无法点击链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！