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

Question

我遇到一个问题,任何使用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的公开问题,但任何人都可以帮助解决方法,保持相同的外观吗？

Answer 1

叠加层position: absolute给出了元素a z-index,卡片中的其余内容是静态position编辑的,因此它们都没有z-index.您可以z-index通过添加非静态position链接来指定链接,并且由于您的卡片链接位于HTML中的叠加层之后,堆叠顺序会将卡片链接的堆叠顺序放在叠加层的顶部.

.card-link {
  position: relative;
}