こんにちは朱夏です。
今回は、CSSで要素を画面上に固定する「position: fixed;」の使い方と、使うときの注意点について解説していきたいと思います。
メニューバーとかトップに戻るボタンなどを固定するのに使えそう。
でも注意点って何だろう？
「position: fixed;」の注意点は、他の要素に干渉できない事です。
後ほど詳しく解説していきたいと思います。
それではいってみましょう。
position: fixed;の基本的な書き方
トップにメニューを固定してみる
注意点と回避方法
あとがき
position: fixed;の基本的な書き方
基本的な書き方を紹介します。
先ずはサンプルをどうぞ。
See the Pen
MWaKmZm by 朱夏 (@syunatsu1)
on CodePen.
基本的な書き方としては、固定させたい要素に対して「position: fixed;」を書くだけです。
「position: fixed;」は絶対位置になるので、画面の左上を基準にして配置してあげてください。
トップにメニューを固定してみる
具体的なサンプルとして、画面のトップにメニューを固定してみたいと思います。
See the Pen
mdeVMyR by 朱夏 (@syunatsu1)
on CodePen.
こんな感じです。
画面に常に表示できるので、操作しやすいページ作りに使えると思います。
注意点と回避方法
「position: fixed;」の注意点を解説します。
- 他の要素と干渉しない
これは、一つ例を見ていただきたいと思います。
初めに、「position: fixed;」を使用していない状態。
See the Pen
yLYeoWB by 朱夏 (@syunatsu1)
on CodePen.
解りやすいように緑の丸を表示しています。
この状態で、「position: fixed;」を有効にしてみます。
See the Pen
rNOxGBe by 朱夏 (@syunatsu1)
on CodePen.
「position: fixed;」を有効にする以外の変化はありませんが、結果をみると丸がメニューバーに隠れてしまっています。
これは、メニューバーが「position: fixed;」を付けたことにより、別レイヤーの要素となり、他の要素と触れ合うことが出来なくなってしまい、要素が重なってしまう現象です。
回避方法として、以下の3つの方法を上げておきます。
- margin-topで調整する
- ダミーのメニューバーを重なる部分に配置する
- 重なっても問題ないデザインにする
重なっている部分をいかにして解決するかということですね。
重ならない様に余白やダミーでずらすか、重なってもいいやって言うデザインにするか、センスが問われる部分です。
あとがき
というわけで、要素を画面に固定する「position: fixed;」について書いてみました。
今回のまとめはこちら。
- 「position: fixed;」を付けたら画面に固定される
- 固定した要素に隠れる部分がある
- 隠れる部分をどうやって回避するか
JavaScriptのようにフェードインしたりフェードアウトしたりはしませんが、TOPへ戻るボタンを常時追従させたりする事も出来ます。
上手く使用してデザインの幅を広げていきたいですね。
今回は以上です。
次回もよろしくお願いします。
