我有一个具有背景的div：透明，以及边框。在这个div下面，我有更多的元素。
目前，当我在覆盖div外部单击时，我可以单击底层元素。但是，当我直接单击覆盖div时，我无法单击底层元素。
我希望能够单击这个div，以便单击底层元素。
当前回答
您可以放置AP覆盖，如。。。
#overlay {
position: absolute;
top: -79px;
left: -60px;
height: 80px;
width: 380px;
z-index: 2;
background: url(fake.gif);
}
<div id="overlay"></div>
把它放在你不想要的地方。总之是有效的。
其他回答
是的，可以强制重叠层通过（忽略）单击事件。此外，你可以让特定的孩子被排除在这种行为之外。。。
可以使用指针事件执行此操作
指针事件影响对点击、轻击、滚动和悬停事件的反应。
在应该忽略/通过您设置的所述事件的层中
pointer-events: none;
需要再次响应鼠标/轻敲事件的无响应层的子级需要：
pointer-events: auto;
如果您使用多个重叠的div层（可能有些父层是透明的），那么第二部分非常有用，您需要能够单击子元素，并且仅单击该子元素。
示例用法：
.父级{指针事件：无；}.儿童{指针事件：自动；}<div class=“parent”><a href=“#”>我没有反应</a><a href=“#”class=“child”>我又可以点击了，哇</a></div>
是的，你可以这样做。
使用指针事件：none以及IE11的CSS条件语句（在IE10或更低版本中不起作用），您可以获得一个跨浏览器兼容的解决方案。
使用AlphaImageLoader，您甚至可以在覆盖div中放置透明的.PNG/.GIF，并让单击流到下面的元素。
CSS:
pointer-events: none;
background: url('your_transparent.png');
IE11条件：
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
这里是一个包含所有代码的基本示例页面。
您可以放置AP覆盖，如。。。
#overlay {
position: absolute;
top: -79px;
left: -60px;
height: 80px;
width: 380px;
z-index: 2;
background: url(fake.gif);
}
<div id="overlay"></div>
把它放在你不想要的地方。总之是有效的。
例如，只需在所有HTML摘录周围包装一个标记
<a href="/categories/1">
<img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
<div class="caption bg-orange">
<h2>
test1
</h2>
</div>
</a>
在我的示例中，我的字幕类具有悬停效果，指针事件为：无；你只会输
包装内容将保持悬停效果，您可以单击所有图片，包括div，问候！
另一个尝试（情境）的想法是：
将所需内容放入div中；将非点击覆盖放在整个页面上，z索引更高，制作原始div的另一个裁剪副本overlay和abs将复制div放置在与原始内容相同的位置，您希望使用更高的z索引进行单击？
有什么想法吗？
