html - 将元素重叠在其他元素上

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 移动到某些图像 Assets 或者可能只是带有更大字体的标签，这会重叠图像像这样

如何使用 HTML 和 CSS 实现这一点？

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

Answer 1

您可以通过简单的负边距实现这一点，例如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>