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

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

CSSにおける絶対配置（absolute positioning）とは、要素を「static以外のpositionプロパティが設定された、最も近い祖先要素」を基準として配置する方法です。position: absolute;を指定した要素は、top・right・bottom・leftといったオフセットプロパティを使って正確な位置を決定できます。

絶対配置された要素は通常のドキュメントフローから取り除かれるため、他の要素のレイアウトには影響を与えません。この特性を活かすことで、要素の重ね合わせや中央寄せなど、柔軟なレイアウトが実現できます。

サンプルコード1：絶対配置で要素を中央に配置する

以下は、CSSの絶対配置を使用した基本的な例です。transformプロパティと組み合わせることで、画面中央にテキストを配置しています。

<!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>デモ用テキスト</div>
<p>ICC（国際クリケット評議会）は1909年に設立された、クリケット競技を統括する国際機関です……</p>
<div>
</div>
</body>
</html>

実行結果

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

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

この例では、top: 50%とleft: 50%で要素の左上隅を中央に移動させ、さらにtranslate(-50%, -50%)によって要素自体のサイズ分だけ戻すことで、完全な中央寄せを実現しています。

サンプルコード2：relative・absolute・fixedの違いを比較する

次の例では、relative（相対配置）、absolute（絶対配置）、fixed（固定配置）という3つの配置方法の挙動の違いを確認できます。

<!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">MySQLは最も人気のあるオープンソースのリレーショナルSQLデータベース管理システムです。MySQLは、さまざまなWebベースのソフトウェアアプリケーションの開発に利用される、最高のRDBMSの一つです。<mark>relative（相対配置）</mark>
<div id="d2"><mark>absolute（絶対配置）</mark></div>
<div id="d3"><mark>fixed（固定配置）</mark></div>
</div>
</body>
</html>

実行結果

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

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

各配置方法のポイント

  • relative（相対配置）：要素本来の位置を基準に、オフセットプロパティで相対的にずらして配置します。
  • absolute（絶対配置）：static以外のpositionを持つ最も近い祖先要素を基準に配置されます。親要素にposition: relative;を指定しておくのが一般的です。
  • fixed（固定配置）：ブラウザのビューポート（表示領域）を基準に配置され、スクロールしても位置が固定されたままになります。

まとめ

CSSの絶対配置は、position: absolute;とオフセットプロパティ（top・right・bottom・left）を組み合わせることで、親要素を基準に自由に要素を配置できる強力な手法です。ドキュメントフローから外れる特性を理解し、中央寄せや重ね合わせ表現など、目的に応じて適切に活用しましょう。

  1. CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

    CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro

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

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