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

添加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;
}

以下是Working Solution。

希望这有助于。

Answer 2

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

pointer-events: none

（包括＆gt; = IE11的跨浏览器解决方案）

此解决方案的

Here is source包含更多信息。我在chrome，firefox和safari（macOs和iOS）上测试它并且工作:)

Answer 3

你的z-index有问题..

它涵盖了菜单元素：

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

http://jsfiddle.net/Dq6F4/2/

Answer 4

将position:relative添加到#menu

#menu
{
    position:relative;
}

JS Fiddle Demo

Answer 5

将z-index：1放到具有绝对属性的组件中。

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 6

使用Google Chrome或Mozilla Firefox的开发人员工具将鼠标悬停在您的链接和div上（或选择它们）。通过这种方式，您可以看到正在发生的事情，并且最有可能的是，链接顶部还有另一个div或其他对象，这会阻止您点击它们。 Firefox还有一个3D选项，可以更好地显示所有这些：

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view

Answer 7

您的问题实际上是#left_border将链接覆盖为覆盖。限制它的宽度.. e.g。

#left_border{
  width:50px;
}

Answer 8

我发现了一个非常简单的解决方案！我将左侧设置为百分比 - 它以像素为单位 - 并添加了一个左边距离像素。这就像一个魅力！ http://2letscode.blogspot.com/2014/07/links-not-clickable-when-inside.html

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

8 个答案: