メシのタネ

メシのタネになる、Laravelや設計思想の技術配信サイト


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

,

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

gazoumakaron4

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

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

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

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

textimage

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

詳しく知りたい

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

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

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


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.