覆盖元素与其他元素重叠

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实现这个？

Sample https://jsfiddle.net/46qnx1LL

- lapots

---

你的样式在哪里？请提供一个最小、完整和可验证的示例，例如作为Stack Snippet。 - andreas

@andreas 我以为 bootstrap 的样式会很容易辨认。已经修复了。 - lapots

Answer 1

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

如果你发现元素被隐藏在另一个元素下面，那么你可以通过指定z-index:层号;来将其移到更高的图层，以便元素位于正确的图层上。 JS Fiddle

- Andrew

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>

- andreas