将元素重叠在其他元素上

Question

目前在我的页面上我有这个布局

<div class="card">
    <div class="card-block">
        <h4 class="card-title text-muted">UltimateWarrior15</h4>
        <h6 class="card-subtitle text-muted">
            Adventurer card
        </h6>
    </div>
    <img data-src="holder.js/100px180/?text=Image">
    <div class="card-block">
        <div class="form-group row">
            <label for="player-level-text" class="col-xs-2 col-form-label">Rank</label>
            <div class="col-xs-10">
                <label class="form-control text-muted">D</label>
            </div>
        </div>
    </div>
</div>

它给出了非常简单的结果

但我想要实现的是将 rank 值从 label 格式类似于某些图像资产的输入或者可能只是带有更大字体的标签，这样会重叠图像

如何使用 HTML 和 CSS 实现此目的？

样本 https://jsfiddle.net/46qnx1LL

Answer 1

您可以应用 CSS position:relative;，然后指定一个偏移量，例如 top:-50px;left:-20px;，它将元素向左移动 20 像素，向上移动 50 像素。您还可以指定 right 和 bottom 并使用正值或负值。

如果您发现该元素隐藏在另一个元素下面，那么您可以通过指定z-index:层数;将其移动到更高层，以便该元素位于右层。

JS Fiddle

Answer 2

您可以通过简单的负边距实现这一点，例如margin-top: -75px;。通过设置 border: none; 和 background: transparent; 只有字体可见。现在你只需要将text-align: right;应用到父div，你的字母就在右边。

这是一个例子：

.card-block .col-form-label {
  display: none;
}
.card-block > .row > div {
  text-align: right;
}
.card-block .text-muted {
  border: none;
  background: transparent;
  font-size: 4em;
  font-weight: bold;
  margin-top: -75px;
  color: black !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="card-block">
    <h4 class="card-title text-muted">UltimateWarrior15</h4>
    <h6 class="card-subtitle text-muted">
    Adventurer card
   </h6>
  </div>
  <img data-src="holder.js/100px180/?text=Image">
  <div class="card-block">
    <div class="form-group row">
      <label for="player-level-text" class="col-xs-2 col-form-label">Rank</label>
      <div class="col-xs-10">
        <label class="form-control text-muted">D</label>
      </div>
    </div>
  </div>
</div>

将元素重叠在其他元素上

Overlap element over other elements

html

css

bootstrap-4