CSS で画像の位置が変えられないとき

CSS で top や left を指定しても、画像の位置が変化しない。

#img{
    top: 100px;
    left: 100px;
}

アイコンの位置が左上のまま

結論

position で absolute を指定する。

#img{
    position: absolute;
}

CSS の position とは？

CSS には position というプロパティが存在し、要素をどのように「配置」するかのルールを定めています。

書き方はこのような感じです。

#img{
    position: absolute;
}

JavaScript から変更することもできます。

const img = document.getElementById("img");
img.style.position = "absolute";

position はデフォルトでは static という値になります。しかし、これだと要素の位置を変更できません。

画像を重ねたり、思い通りの位置に移動させたい場合は absolute や fixed といった値に変更しましょう。そうすれば、top や left の値が適用されるようになります。

#img{
    position: absolute;
    top: 100px;
    left: 100px;
}

アイコンの位置を変更できた

注：親要素は relative にする

absolute は、「親要素に対して」画像をどこに配置するかを定めるという意味です。

なので、親要素の position には基本的に relative を指定してください。

例：container の中に img という画像を配置する場合

.container {
    position: relative;
}
#img {
    position: absolute;
    top: 100px;
    left: 100px;
}

参考