Bootstrap card-img-overlay 中的锚点标签不可点击答案

【问题标题】：Anchor tag not clickable within Bootstrap card-img-overlayBootstrap card-img-overlay 中的锚点标签不可点击
【发布时间】：2019-11-17 00:08:13
【问题描述】：

我正在尝试将一些关键字标签添加到由 Bootstrap 卡组成的图片库中。一切都按预期工作，除了锚标记包装的元素不可点击。

问题似乎与此类似：href link inside modal is not working 和此：Anchor links in bootstrap don't work 但这些情况下的解决方案似乎都不适用于这里。问题似乎在于覆盖标签的“card-img-overlay”。

{% block page_content %}
<div class="container">
  <legend>Gallery</legend>
  <div class="row">
    {% set current_page=gallery_items_page %}
    {% for item in current_page.items %}
    {% if item.published == True %}
    <div class="col-4">
      <div class="card mb-3">
    <img style="width: 100%;" src="{{ url_for('images.static', filename=item.cover_picture[0].file_name) }}" class="img-fluid card-img" alt="responsive">
    <div class="card-img-overlay">
      <h1 style='font-family: "Miniver"' class="text-white">{{ item.title }}</h1>
    </div>
    <div class="card-header">
      {% for kw in item.keywords %}
      {# it's probably more efficient to use the PK, but more expressive to use the string... #}
      <a href="{{ url_for('search.search_keyword', keyword=kw.keyword) }}" class="badge badge-primary">{{ kw.keyword }}</a>
      {% endfor %}
    </div>
      </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
</div>
{% endblock %}

使用 Firefox 上的检查元素工具，可以看到来自 Jinja2 模板的 URL 工作正常，一切看起来都符合预期，并且链接本身工作正常，只是无法点击。如果我将链接放在卡片 div 之外，它会正常运行。

这是一个小提琴：https://jsfiddle.net/us4Lmqbp/

【问题讨论】：

它工作正常。请添加一个有效的 sn-p 以便我们查看
谢谢，我添加了一个 jsfiddle 的链接。

标签： html css twitter-bootstrap

【解决方案1】：

您的锚标记不可点击，因为它位于div.card-img-overlay 下方。因此，当您单击时，您单击的是该 div 而不是锚标记。您可以通过右键单击浏览器中的锚标记并选择“检查”来识别这一点。在检查器窗口中，实际点击的元素被选中。

要使锚标记可点击，您需要：

通过赋予 div 样式使 div 对点击“透明” pointer-events: none（阅读更多here）。 jsFiddle

或

通过增加z-index（添加样式 z-index: 20 并添加 position: relative - z-index 确实不适用于静态定位的元素，这是默认设置浏览器样式）。 jsFiddle

【讨论】：