Overlay Element Over Other Elements
I currently have this layout on my page
<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> This gives a fairly simple result.
But what I want to achieve is moving the rank value from a label formatted similar to entering an image in some resource, or maybe just a shortcut with a large font that will overlap an image like this
How to do this using HTML and CSS ?
Example https://jsfiddle.net/46qnx1LL
You can achieve this with a simple negative field, for example. margin-top: -75px; . When setting border: none; and background: transparent; only the font is displayed. Now you just 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> You can apply CSS position:relative; , and then specify the offset, such as top:-50px;left:-20px; which moves 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 under another element, you can take it to a higher level by specifying the layer number z-index: so that the item is on the right layer.