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

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

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

結論

position で absolute を指定する。

#img{
    position: absolute;
}

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

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

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

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

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

「position - CSS: カスケーディングスタイルシート | MDN」, <https://developer.mozilla.org/ja/docs/Web/CSS/position>（参照2022/06/26）.

「CSSのpositionを総まとめ！absoluteやfixedの使い方は？」, <https://saruwakakun.com/html-css/basic/relative-absolute-fixed>（参照2022/06/26）.

プログラミング（JavaScriptほか）を学習するなら Recursion

まずは無料会員登録↑