.net column
.NET開発者のためのブログメディア

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

 
position fixedの使い方を解説!|CSSの記述で要素の位置を固定する方法
SE
CSSの記述だけで要素の位置を指定する方法があるそうですね。
PM
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.


SE
CSSの記述だけで要素の位置を指定するにはposition fixedを使えばいいのですね。
PM
さまざまな位置の指定方法はご紹介したソースコードを参考にしてください。

まとめ

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

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags