CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのpositionプロパティ徹底解説！static・relative・absolute・fixedの使い分け

CSSのpositionプロパティとは

CSSのpositionプロパティは、要素の配置方法（ポジショニング）を指定するために使用されます。このプロパティを使いこなすことで、通常の文書フローに従った配置はもちろん、要素を好きな位置に重ねて表示することも可能になります。

positionプロパティに指定できる主な値は以下の4つです。

static（静的配置）

デフォルト値です。要素は通常の文書フローの一部として、直前の要素に続いて配置され、後続の要素も通常どおり流れます。topやleftなどのオフセット指定は無効になる点に注意しましょう。

relative（相対配置）

要素は通常の文書フロー内に配置されたまま、指定した距離だけ元の位置からずらして表示されます。ずらしても他の要素のレイアウトには影響を与えません。

absolute（絶対配置）

要素は包含ブロック（positionが指定された祖先要素など）を基準に配置され、通常の文書フローから完全に取り除かれます。後続の要素は、この要素が存在しないかのように配置されます。

fixed（固定配置）

絶対配置と同様の動作をしますが、基準となるのはビューポート（ブラウザの表示領域）です。スクロールしても画面上の同じ位置に固定され続けるため、ヘッダーや追従ボタンの実装によく使われます。

CSSで要素を配置するサンプルコード

以下は、static・relative・absoluteの各配置方法の挙動を確認できるコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
    color: white;
    text-align: center;
    height: 100px;
    width: 100px;
}
.static {
    position: static;
    background-color: greenyellow;
}
.relative {
    position: relative;
    left: 50px;
    background-color: rgb(255, 47, 47);
}
.absolute {
    position: absolute;
    right: 50px;
    top: 20px;
    background-color: hotpink;
}
</style>
</head>
<body>
<h1>Position elements example</h1>
<div class="static">STATIC</div>
<div class="relative">RELATIVE</div>
<div class="absolute">ABSOLUTE</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような表示になります。

  • STATIC：黄緑色のボックスが通常のフローに沿って左上に配置される
  • RELATIVE：赤色のボックスが通常の位置から右へ50pxずれて表示される
  • ABSOLUTE：ピンク色のボックスがページ右上（right: 50px、top: 20px）の位置に配置される

まとめ

positionプロパティは、Webページのレイアウトにおいて非常に重要な役割を果たします。staticを基準に、relativeで微調整を行い、absoluteやfixedで自由な配置や固定表示を実現する、という使い分けをマスターすれば、より柔軟で洗練されたデザインが可能になります。ぜひ実際にコードを書きながら、それぞれの挙動の違いを体感してみてください。

  1. CSS疑似要素（::before・::afterなど）の使い方を徹底解説

    CSS疑似要素（Pseudo Elements）とは？ CSSの疑似要素を使うと、要素の「最初の1文字」や「最初の行」など特定の部分だけにスタイルを適用したり、要素の前後に新しいコンテンツを挿入したりできます。装飾のための余計なHTMLを書かずに済むため、マークアップをすっきり保ちながら表現力を高められる便利な機能です。 ポイント： 疑似クラスと疑似要素を区別するため、CSS3以降では疑似要素はコロン2つ（ダブルコロン :: ）の記法で書くのが標準となっています。 基本構文 疑似要素は、対象となるセレクタの後ろにダブルコロンで続けて記述します。 Selector::pseudo-elemen

  2. CSSのpositionプロパティを使って要素を自在に整列する方法

    CSSでは、positionプロパティとtop・right・bottom・leftなどのオフセットプロパティを組み合わせることで、要素を思い通りの位置に整列させることができます。 positionプロパティで使える主な値 static — 初期値。通常の文書フローに従って配置され、オフセットプロパティは無効になります。 relative — 要素の本来あるべき位置を基準に、相対的にずらして配置します。 absolute — positionが指定された直近の親要素を基準に、絶対的な位置へ配置します。 fixed — ブラウザのビューポート(表示領域)を基準に固定され、スクロールしても動きませ