如何使链接在 Bootstrap v4 中与 card-img-overlay 一起使用答案

【问题标题】：How to make links work with card-img-overlay in Bootstrap v4如何使链接在 Bootstrap v4 中与 card-img-overlay 一起使用
【发布时间】：2017-08-17 23:21:38
【问题描述】：

我遇到了一个问题，即任何使用 card-img-overlay 在图像上显示文本的 Bootstrap v4 卡都会阻止该图像下方的链接工作。

这些链接确实有效：

<div class="card" style="border-color: #333;">
    <img class="card-img-top" src="..." alt="Title image"/>
    <div class="card-inverse">
      <h1 class="text-stroke">Title</h1>
    </div>
    <div class="card-block">
      <a href="#" class="card-link">Card link</a>
      <p class="card-text">Article Text</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Date - Author</small>
    </div>
  </div>

这些链接不起作用：

<div class="card" style="border-color: #333;">
    <img class="card-img-top" src="..." alt="Title image"/>
    <div class="card-img-overlay card-inverse">
      <h1 class="text-stroke">Title</h1>
    </div>
    <div class="card-block">
      <a href="#" class="card-link">Card link</a>
      <p class="card-text">Article Text</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Date - Author</small>
    </div>
  </div>

我发现对于 bootstrap v4 存在一个未解决的问题，但是任何人都可以提供一种可以保持相同外观的解决方法吗？

【问题讨论】：

您可以将position: relative添加到.card-link
为什么你希望链接在覆盖层下面是可点击的？如果您希望链接可点击，为什么不将它们放在叠加层中？
完美，做到了。我的 CSS 技能显然缺乏，否则我会在为此打开的 github 问题中注意到这一点。
卡片用于文章，我只希望在叠加层中列出文章标题。下面卡片块中的链接是文章正文内容正上方的共享按钮。图片并不总是与文章中的文字数量对齐，因此使用下面的卡片块似乎更好看，但保持标题覆盖在图片上。
酷。作为答案提交。

标签： html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案1】：

叠加层是position: absolute，它为该元素提供了z-index，而卡片中的其余内容静态为positioned，因此它们都没有z-index。您可以通过添加非静态position 为链接提供z-index，并且由于您的卡片链接位于 HTML 中的叠加层之后，因此堆叠顺序会将卡片链接的堆叠顺序放在叠加层的顶部。

.card-link {
  position: relative;
}

【讨论】：

【解决方案2】：

正如 Michael Coker 所说，将以下内容添加到您的 css 可以解决此问题。

.card-link {
  position: relative;
}

【讨论】：