CSS - 將圖像移動到圖像的左上方

我試圖將文本移動到圖像的左上方，但我無法做到。CSS - 將圖像移動到圖像的左上方

我試着垂直對齊它並添加填充，但我很積極，這是我忽略的一個愚蠢的小修補程序。

這裏是的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; 
}

來源

2017-04-17 mint

有默認樣式瀏覽器正在做關於'margin'和'padding'。在你做其他任何事情之前重置這些，imo。但這就是爲什麼下面的答案是有效的，因爲它充當了「重置」。 – Slime

https://necolas.github.io/normalize.css/通過重置瀏覽器默認樣式表，您可以在瀏覽器中實現佈局更一致。 – aahhaa

請添加以下CSS

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

來源

2017-04-17 14:23:14

我覺得很蠢 - 非常感謝你！ – mint

試試這段代碼。

.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>

來源

2017-04-17 14:29:04 vijay

CSS - 將圖像移動到圖像的左上方

回答

相關問題