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

  • 2019年8月8日
  • CSS

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

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

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

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

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

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


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

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

 

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

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

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

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG