html - 在 Bootstrap 中实现卡片顶部的按钮

Question

我试图在我的卡片顶部实现一个按钮，基本上与卡片重叠

我尝试在卡片上方插入一个按钮并尝试调整边距以使其到达我想要的区域，但是边距顶部会压低页面上的所有内容

<button type="button" class="btn btn-secondary btn-lg " style="margin-left:600px; margin-top:10px">
    Large button
</button>


<div class="card-deck card-info card-width">

  <div class="card special-card">

    <h1 class="card-title text-center">COMMERCIAL</h1>
    <img class="card-img-top" src="assets/img/com.png" alt="Card image cap">
    <div class="card-body">

      <div class="row">
        <div class="col-md-6">
       <ul>[enter image description here][1]

Answer 1

您可以尝试使用 position:absolute 和 z-index 将按钮定位在卡片顶部。

这是它的工作原理。

z-index 允许您将一个元素放置在其他元素之上。默认的 z-index 为零，因此任何大于该值的数字都将位于顶部。 但是，请注意，Bootstrap 经常使用 z-index - 因此可能已经有一些 z-index 值在使用中。

position:absolute 从流中取出一个元素，并允许您将它放在其他元素之上。我们通常将position:absolute与z-index一起使用。

重要:你不能使用position:absolute除非父容器有position:relative(或absolute或fixed)。默认的 position 值为 static，这不适用于子元素中的 position:absolute。

演示:

.outerDiv {position:relative;}
.d1{width:150px;height:80px;background:wheat;}
button{position:absolute;top:10px;left:20px;}

<!-- z-index not needed here because the button comes after the div -->
<div class="outerDiv">
    <div class="d1">Div One</div>
    <button>Button</button>
</div>