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 - 将文本移动到图像的左上角

2 个答案: