与其他元素重叠的元素答案

【问题标题】：Overlap element over other elements与其他元素重叠的元素
【发布时间】：2017-03-16 08:46:24
【问题描述】：

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

<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>

它给出了非常简单的结果

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

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

示例 https://jsfiddle.net/46qnx1LL

【问题讨论】：

你的风格在哪里？请提供您尝试的Minimal, Complete, and Verifiable example，例如作为Stack Snippet
@andreas 我认为bootstrap 样式会被识别。固定。

标签： html css bootstrap-4

【解决方案1】：

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

如果您发现该元素隐藏在另一个元素之下，那么您可以通过指定z-index:层编号; 将其向上移动到更高的层，以便该元素位于正确的层上。

JS Fiddle

【讨论】：

【解决方案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>

【讨论】：