Javascript 卡Img覆盖，溢出卡体

我有一页卡片。顶部有一个缩略图和一个覆盖图。 卡体必须位于覆盖层之外，但会溢出到卡体上

检查演示

https://codepen.io/snarex/pen/NWKbgZM

这是我的卡片设计样本

    <div class="card shadow bg-white rounded">
<a href="#">
    <img src="https://placeimg.com/640/360/any" class="card-img-top" alt="...">

    <div class="card-img-overlay text-center d-flex">
        <img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png"
             class="w-25 align-self-center mx-auto "
             alt="">
    </div>
</a>
<div class="card-body">
    <h5 class="card-title">
        <a href="#" class="text-info">*</a></h5>
</div>

我期待着有这样的东西，但与播放按钮，因为我在代码笔演示

您应该在link元素（）中添加“position:relative”，以便覆盖层连接到它，而不是更高的父元素

    <div class="card shadow bg-white rounded">
        <a href="#" class = "position-relative">
    <img src="https://placeimg.com/640/360/any" class="card-img-top" alt="...">

    <div class="card-img-overlay text-center d-flex">
        <img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png"
             class="w-25 align-self-center mx-auto "
             alt="">
    </div>
</a>
<div class="card-body">
    <h5 class="card-title">
        <a href="#" class="text-info">Hızlı olan kazansın: SEO’nun gizli kahramanı “Page Speed”</a></h5>
</div>

@NIshamMahsin请检查我添加的。将图像放入一个div中，并将

溢出：隐藏

和

位置：相对

设置为Wrapper。它工作了，但我刚刚发现它可以工作，不需要相对位置。我正在尝试使它以引导方式工作。你能检查一下你能不能在上面使用引导“相对位置”类。在另一个示例中，没有覆盖，只是文本与顶部对齐