CSS - Verschieben von Text nach oben links von einem Bild

Question

Ich versuche, den Text in der oberen linken Ecke des Bildes zu verschieben, aber ich bin nicht in der Lage, es zu tun.

Ich habe versucht, es vertikal auszurichten und Padding hinzufügen, aber ich bin mir sicher, es ist eine dumme kleine Korrektur, die ich übersehe. Hier

ist das Beispiel auf 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; 
} 

Answer 1

Bitte fügen Sie CSS folgende

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

Answer 2

versuchen Sie diesen Code.

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

.test 
 
{ 
 
\t position: relative; 
 
} 
 

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

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

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