title: Overlap element over other elements
body: <p>Currently on my page I have this layout</p>
  
  <pre><code>&lt;div class="card"&gt;
      &lt;div class="card-block"&gt;
          &lt;h4 class="card-title text-muted"&gt;UltimateWarrior15&lt;/h4&gt;
          &lt;h6 class="card-subtitle text-muted"&gt;
              Adventurer card
          &lt;/h6&gt;
      &lt;/div&gt;
      &lt;img data-src="holder.js/100px180/?text=Image"&gt;
      &lt;div class="card-block"&gt;
          &lt;div class="form-group row"&gt;
              &lt;label for="player-level-text" class="col-xs-2 col-form-label"&gt;Rank&lt;/label&gt;
              &lt;div class="col-xs-10"&gt;
                  &lt;label class="form-control text-muted"&gt;D&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It gives pretty simple result </p>
  
  <p><a href="https://i.stack.imgur.com/wte4g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wte4g.png" alt="enter image description here"></a></p>
  
  <p>But what I want to achieve is to move <code>rank</code> value from <code>label</code> formatted similar to input to some image asset or maybe just label with bigger font, that would overlap image like this</p>
  
  <p><a href="https://i.stack.imgur.com/8MMRm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8MMRm.png" alt="enter image description here"></a> </p>
  
  <p>How to achieve this using <code>HTML</code> and <code>CSS</code>?</p>
  
  <p>Sample
  <a href="https://jsfiddle.net/46qnx1LL" rel="nofollow noreferrer">https://jsfiddle.net/46qnx1LL</a></p>