CSS 備忘録 | メシのタネ

gazoumakaron4
このエントリーをはてなブックマークに追加

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

 2014/09/03

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

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

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

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

textimage

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

詳しく知りたい

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

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

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


このエントリーをはてなブックマークに追加

コメント

"【CSS】要素を固定させたい場合"
でメシのタネのおすすめを検索したよ!

プログラミング備忘録 | メシのタネ