重叠元素超过其他元素

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>