【css】縦長のページで画像が一緒にスクロールしてしまう時の対処法

asaba 著者:asaba

【css】縦長のページで画像が一緒にスクロールしてしまう時の対処法

divタグにくっつけたimgソースが、下にスクロールした時に一緒に移動してしまったときの対処法です。

今回は他のページで使われているアイコンを流用することにしたのですが

cssで設定した要素は絶対に一緒のはずなのになぜかスクロールと同時に画像もおりてくる事態に。。。

仕方がないのであわてず騒がず要素を触りながら確かめることにしました。

どうやら原因はpositionに何も設定していなかったのが原因

だったみたいで、ralativeだのabsoluteだのfixedだの何かしらの設定をする必要があったみたいです。


top: {
    height: "40px",
    position: 'relative'
  },

↑このように高さが設定してあるタグに対しては何らかのpositionの値を与える必要があります。

 

この中で一番無難なのがralativeで、同じタグに要素をぶち込まない限りは機能してくれるので

何も制約がない場合はこいつをおすすめします。

ちなみにabsoluteはブラウザによっては反映されないものもあるので個人的にはあまり推奨しません。

  • この記事いいね! (0)

著者について

asaba

asaba author

好きなもの:RPG、チョコミント 少しずつ頑張ります。