CSSのposition: fixedで要素を固定表示する方法【実例コード付き】

固定配置（Fixed Positioning）とは

CSSでは、positionプロパティをfixedに設定することで、要素をユーザーのビューポート（ブラウザの表示領域）を基準に配置できます。fixedで配置された要素は、ページをスクロールしても画面上の同じ位置に留まり続けるのが最大の特徴です。位置の指定には、CSSの配置プロパティであるleft、right、top、bottomを使用します。

この特性を活かすことで、固定ヘッダーやナビゲーションバー、「ページトップへ戻る」ボタンなど、常に画面に表示させておきたいUI要素を簡単に実装できます。

例1：基本的な使い方

CSSの固定配置の具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
div:first-child {
   background-color: orange;
   text-align: center;
}
div:last-child {
   width: 250px;
   height: 100px;
   margin: auto;
   background-color: turquoise;
   position: absolute;
   z-index: -1;
   top:0;
   left: 0;
   right: 0;
   bottom: 0;
}
</style>
</head>
<body>
<div>ASP.NETとは？</div>
<p>ASP.NETは、Microsoftが開発・提供するWebアプリケーションフレームワークで、プログラマーが動的なWebサイトを構築できるようにするものです............</p>
<div>
</div>
</body>
</html>

出力結果

上記コードの出力は以下の通りです。

例2：relative・absolute・fixedの違いを比較

次に、relative（相対配置）、absolute（絶対配置）、fixed（固定配置）の基準の違いがわかる例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   border: 2px double #a43356;
   margin: 5px;
   padding: 5px;
}
#d1 {
   position: relative;
   height: 10em;
}
#d2 {
   position: absolute;
   width: 20%;
   bottom: 10px; /*親要素d1を基準*/
}
#d3 {
   position: fixed;
   width: 30%;
   top:10em; /*ビューポートを基準*/
}
</style>
</head>
<body>
<div id="d1">Androidは、スマートフォンやタブレットなどのモバイルデバイス向けのオープンソースでLinuxベースのオペレーティングシステムです。AndroidはGoogleを中心としたOpen Handset Allianceや他の企業によって開発されました。<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>

出力結果

上記コードの出力は以下の通りです。

positionプロパティの各値のまとめ

• static：デフォルト値。特別な配置は行われません。
• relative：通常の表示位置を基準に、相対的にずらして配置します。
• absolute：positionがstatic以外の最も近い祖先要素を基準に配置します。
• fixed：ビューポートを基準に配置され、スクロールしても画面上の位置が変わりません。
• sticky：スクロール位置に応じて、relativeとfixedの中間のような挙動を示します。

特にfixedは基準がビューポートである点がabsoluteとの大きな違いです。用途に応じて適切な配置方法を選択することで、直感的で使いやすいレイアウトを実現できます。