position fixedの使い方を解説！｜CSSの記述で要素の位置を固定する方法

システム
エンジニア

CSSの記述だけで要素の位置を指定する方法があるそうですね。

プロジェクト
マネージャー

CSSの記述だけで要素の位置を指定するにはposition fixedを使います。

position fixedで要素を固定しよう

今回は、CSSの設定で要素の位置を固定する方法を紹介します。position fixedを使用します。
基本的な使い方から、重なりの設定方法、親要素に対する固定方法などを紹介します。

興味のある方はぜひご覧ください。

基本的な使い方

「position: fixed」の基本的な使い方を紹介します。HTMLは以下のように記述します。

CSSは以下のように記述します。
実行結果は以下のようになります。

See the Pen
position_fixed1 by kskumd (@kskumd)
on CodePen.

z-indexで重なりの設定

書き方によっては、意図しない重なりになることがあります。HTMLを以下に記載します。

CSSは以下のように記述します。

実行結果は以下のようになります。position fixedが後ろ側になっています。

See the Pen
position_fixed2 by kskumd (@kskumd)
on CodePen.

これを解消するには、「z-index」を指定します。数値が大きいほうが上側になります。

実行結果は以下のようになります。

See the Pen
position_fixed3 by kskumd (@kskumd)
on CodePen.

親要素基準で固定

画面の左上基準ではなく、親要素の左上基準で固定する方法を紹介します。topおよびleftに「auto」を指定します。HTMLは以下のように記述します。

CSSは以下のように記述します。

実行結果は以下のようになります。画面の左上基準ではなく、親要素基準で固定されていることが分かります。

See the Pen
position_fixed4 by kskumd (@kskumd)
on CodePen.

fixedの部分をずらす

「position: fixed」で固定されたヘッダ部分が重なって見えない部分があるので、その分をずらす方法を紹介します。padding-topを指定します。
HTMLは以下のように記述します。

CSSは以下のように記述します。

実行結果は以下のようになります。「position: fixed」で固定されたヘッダ部分ずれていることが分かります。

See the Pen
position_fixed5 by kskumd (@kskumd)
on CodePen.

システム
エンジニア

CSSの記述だけで要素の位置を指定するにはposition fixedを使えばいいのですね。

プロジェクト
マネージャー

さまざまな位置の指定方法はご紹介したソースコードを参考にしてください。

まとめ

いかがでしたでしょうか。「position fixed」で要素の位置を固定する方法を紹介しました。
基本的な使い方から、重なりの設定方法、親要素に対する固定方法などを紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。