Overlap element over other elements

Question

Currently on my page I have this layout

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

It gives pretty simple result

But what I want to achieve is to move rank value from label formatted similar to input to some image asset or maybe just label with bigger font, that would overlap image like this

How to achieve this using HTML and CSS?

Sample https://jsfiddle.net/46qnx1LL

Solution 1

You can achieve this with a simple negative margin, e.g. margin-top: -75px;. With setting the border: none; and background: transparent; only the font is visible. Now you only need to apply text-align: right; to the parent div and your letter is on the right side.

Here is an example:

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

Solution 2

You can apply the CSS position:relative; and then specify an offset such as top:-50px;left:-20px; which would shift the element 20 pixels to the left and 50 pixels up. You can also specify right and bottom and use positive or negative values.

If you find that the element is hidden underneath another element, then you can move it up to a higher layer by specifying the z-index:layer number; so that the element is positioned on the right layer.

JS Fiddle