当添加具有绝对位置的div时,无法单击链接

Question

我在页面上有菜单,div是绝对定位的.问题是当这个div在页面上时,我无法点击菜单项中的任何链接.

当我删除这个div(#left_border)时,可以再次点击链接.

为什么？

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/

Answer 1

CSS - 取消阻止点击添加到#left_border类以下语句:

pointer-events: none 

(这是包括> = IE11的跨浏览器解决方案)

以下是具有更多信息的此解决方案的来源.我测试了它在chrome,firefox和safari(macOs和iOS)上工作:)

Answer 2

添加一个z-index:-1;这将允许单击链接.由于The Div绝对位于链接上,因此不允许点击.

 #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;
}  

这是相同的工作解决方案.

希望这可以帮助.

Answer 3

添加position:relative到#menu

#menu
{
    position:relative;
}

JS小提琴演示

Answer 4

将 z-index:1 放在具有绝对属性的组件上。

例如：

function myFunction() {
  document.getElementById("print").innerHTML = "Hello World";
}

.custcontainer {
    position: relative;
    
}
.custcontainer .like {
    position: absolute;
    top: 18%;
    left: 10%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    cursor: pointer;
    font-size:30px;
    text-align: center;
    z-index: 1;
}

<div class="custcontainer">
  <P id="print"></p>
  <button onclick="myFunction()" class="like">like</button>
  <img src="https://www.crownplumbing.co/wp-content/uploads/2015/07/placeholder.gif"/>
</div>