【CSS】要素を固定させたい場合

gazoumakaron4

ヘッダー要素とかナビゲーションとか要素を固定させて
それ以下のコンテンツだけスクロールさせてしまいたいって場合があります。

いつも何となくコピペしてましたが、
需要も増えたし、もう好い加減ちゃんと覚えようということで、覚えました。
positionプロパティで対応するっぽいですね。調べてみたところ。
いくつかコード見てみたところposition:fixedとz-indexが大事みたいですね。

固定したい要素にposition:fixedを適用

例えばヘッダーを固定したい場合、ヘッダーに対してposition:fixedと
z-indexを設定します。そうすると、その下のコンテンツが、下から上に
重なってくるので、下の要素にはpaddingを設定します。

textimage

とりあえず要素を固定させたいなら、これでできます。

詳しく知りたい

こんだけじゃ良く分からない人は

Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと
ヘッダとフッタを固定して常に表示

上のリンクは詳しい説明が載っていて、
下のリンクはサンプルコードが載っています。

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事