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

CSSの相対配置（position:relative）の仕組みと使い方を解説

CSSでは、要素のpositionプロパティにrelative（相対配置）を指定することで、要素を通常どおりにレンダリングしながら位置を調整できます。相対配置が指定された要素は、CSSの配置プロパティ（top、right、bottom、left）によって、本来の位置から相対的に移動されます。

相対配置の大きな特徴は、要素が元々占めていた領域が保持されるという点です。そのため、要素をずらしても、周囲の他の要素のレイアウトには影響を与えません。

相対配置の基本例

それでは、CSSの相対配置の基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p {
    margin: 0;
}
div:first-child {
    position: relative;
    top: 20px;
    background-color: orange;
    text-align: center;
}
</style>
</head>
<body>
<div>PostgreSQL</div>
<p>PostgreSQLは強力なオープンソースのオブジェクト関係データベースシステムです。15年以上にわたり活発な開発が続けられています.................</p>
<div></div>
</body>
</html>

出力結果

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

CSSの相対配置（position:relative）の仕組みと使い方を解説

relative・absolute・fixedを組み合わせた例

続いて、相対配置（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">PhoneGapはAdobe Systemsが提供するソフトウェア開発フレームワークで、モバイルアプリケーションの開発に利用されます。PhoneGapでアプリを開発する場合、開発者はモバイル向けプログラミング言語の知識を必要とせず、HTML、CSS、JavaScriptといったWeb開発言語だけで開発できます。<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>

出力結果

このコードを実行すると、次のような出力になります。

CSSの相対配置（position:relative）の仕組みと使い方を解説

まとめ

  • relative：要素を通常の位置から相対的にずらして表示する。元のスペースは保持されるため、他の要素のレイアウトには影響しない。
  • absolute：positionが指定された直近の祖先要素（この例ではrelativeの親要素）を基準に配置される。
  • fixed：ビューポートを基準に配置され、ページをスクロールしても画面上の同じ位置に固定され続ける。
  1. CSSのposition: fixedで要素を固定表示する方法【実例コード付き】

    固定配置（Fixed Positioning）とは CSSでは、positionプロパティをfixedに設定することで、要素をユーザーのビューポート（ブラウザの表示領域）を基準に配置できます。fixedで配置された要素は、ページをスクロールしても画面上の同じ位置に留まり続けるのが最大の特徴です。位置の指定には、CSSの配置プロパティであるleft、right、top、bottomを使用します。 この特性を活かすことで、固定ヘッダーやナビゲーションバー、「ページトップへ戻る」ボタンなど、常に画面に表示させておきたいUI要素を簡単に実装できます。 例1：基本的な使い方 CSSの固定配置の具体的な

  2. CSSの絶対配置（position: absolute）とは？使い方をサンプルコードで解説

    CSSにおける絶対配置（absolute positioning）とは、要素を「static以外のpositionプロパティが設定された、最も近い祖先要素」を基準として配置する方法です。position: absolute;を指定した要素は、top・right・bottom・leftといったオフセットプロパティを使って正確な位置を決定できます。絶対配置された要素は通常のドキュメントフローから取り除かれるため、他の要素のレイアウトには影響を与えません。この特性を活かすことで、要素の重ね合わせや中央寄せなど、柔軟なレイアウトが実現できます。サンプルコード1：絶対配置で要素を中央に配置する以下は、C