Search code examples
csshtmlvertical-alignmenttext-align

CSS - moving text to the top left of an image

I'm trying to move the text to be in the top left of the image, but I'm not able to do it.

I've tried vertical-aligning it and adding padding, but I'm positive it's a stupid small fix I'm overlooking.

Here is the example on jsfiddle

https://jsfiddle.net/impo/se9tL7ds/

HTML

    <div class="test">
    <p>100</p>
    <img alt="test" 
    src="http://cdn.bulbagarden.net/upload/3/32/Spr_5b_289.png" 
    class="pkmn"></img>
    </div>

CSS

.test 
{
     position: relative;
}

.test .pkmn
{
    border-radius: 55px;
    border: 3px solid #73AD21;
    padding: 5px;
    position: relative;
}

.test p
{
    font-family: 'Courier New Regular', sans-serif;
    font-size: 30px;
    z-index: 100;
    position: absolute;
}
Solution

  • Please add following CSS

    .test p{margin-top:0px;}