CSS

Question

我想将文本移动到图片的左上角，但我做不到。

我试过对其进行垂直对齐并添加边距，但我敢肯定这是我忽略的一个愚蠢的小修复程序。

这是jsfiddle上的例子

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

请添加以下内容CSS

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

Answer 2

试试这个代码。

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

.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;
     margin :0px;
}

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

CSS - 将文本移动到图像的左上角

CSS - moving text to the top left of an image

html

text-align

vertical-alignment