user1432980 user1432980 - 1 month ago 7
CSS Question

Overlap element over other elements

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

enter image description here

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

enter image description here

How to achieve this using
HTML
and
CSS
?

Sample
https://jsfiddle.net/46qnx1LL

Answer

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>

Comments