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

【问题标题】：CSS - moving text to the top left of an imageCSS - 将文本移动到图像的左上角
【发布时间】：2017-04-17 22:29:04
【问题描述】：

我正在尝试将文本移动到图像的左上角，但我无法做到。

我试过垂直对齐它并添加填充，但我很肯定这是我忽略的一个愚蠢的小修复。

这是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;
}

【问题讨论】：

浏览器对margin 和padding 有默认样式。在你做任何其他事情之前先重置那些，imo。但这就是为什么下面的答案有效的原因，因为它起到了“重置”的作用。
necolas.github.io/normalize.css 通过重置浏览器默认样式表，您可以在跨浏览器的布局中获得更高的一致性。

标签： css html vertical-alignment text-align

【解决方案1】：

请添加以下 CSS

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

【讨论】：

【解决方案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>

【讨论】：