Html 添加具有绝对位置的 div 时无法单击链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16773989/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
when div with absolute position is added cannot click on links
提问by renathy
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。问题是当这个 div 在一个页面上时，我无法点击菜单项中的任何链接。
When I remove this div (#left_border), then links are clickable again.
当我删除这个 div (#left_border) 时，链接可以再次点击。
Why?
为什么？
CSS:
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:
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>
Here you see, that you cannot click on menu items: http://jsfiddle.net/Dq6F4/
在这里你看到，你不能点击菜单项：http: //jsfiddle.net/Dq6F4/
回答by Kamil Kie?czewski
CSS- to unblock clicking add to #left_borderclass following statement:
CSS- 取消阻止点击添加到#left_border类以下语句：
pointer-events: none
(it is cross-browser solution including >= IE11)
（它是跨浏览器解决方案，包括 >= IE11）
Here is sourceof this solution with more informations. I tested it on chrome, firefox and safari (macOs and iOS) and works :)
这是此解决方案的来源，其中包含更多信息。我在 chrome、firefox 和 safari（macOs 和 iOS）上对其进行了测试，并且可以正常工作:)
回答by Nitesh
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.
添加一个z-index:-1;这将允许点击链接。由于 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;
}
Here is the Working Solutionfor the same.
这是相同的工作解决方案。
Hope this Helps.
希望这可以帮助。
回答by Dory Zidon
you have a problem with z-index..
你的 z-index 有问题..
it is covering the menu elements:
它涵盖了菜单元素：
#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;
}
回答by Sachin
Add position:relativeto #menu
添加position:relative到#menu
#menu
{
position:relative;
}
回答by Aditya Parmar
put z-index:1 to that component which has absolute property.
将 z-index:1 放在具有绝对属性的组件上。
for example:
例如：
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>回答by Yotam Omer
Your problem is actually with #left_border covering the links as overlay. limit it's width.. e.g.
您的问题实际上是 #left_border 将链接覆盖为叠加层。限制它的宽度.. 例如
#left_border{
width:50px;
}
回答by user3895331
I found a very simple solution that works!I set the left to a percentage-it was in pixels- and added a margin-left in pixels.And that worked like a charm!! http://2letscode.blogspot.com/2014/07/links-not-clickable-when-inside.html
我找到了一个非常简单的解决方案！我将左边设置为一个百分比 - 它以像素为单位 - 并添加了一个边距 - 以像素为单位。这就像一个魅力！ http://2letscode.blogspot.com/2014/07/links-not-clickable-when-inside.html
回答by Borniet
Use Google Chrome or Mozilla Firefox's Developer tools to hover over your links and divs (or select them). This way you can see what is going on, and most probably, there is another div or other object stacked on top of your links, which is preventing your from clicking them. Firefox also has a 3D option, which visualizes all this even better:
使用 Google Chrome 或 Mozilla Firefox 的开发人员工具将鼠标悬停在您的链接和 div 上（或选择它们）。通过这种方式，您可以看到正在发生的事情，而且很可能还有另一个 div 或其他对象堆叠在您的链接顶部，这会阻止您单击它们。Firefox 还有一个 3D 选项，可以更好地可视化所有这些：
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view
