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>

在引导程序中实现卡顶部的按钮

1 个答案: