• Home
  • Web制作
  • 【CSS】position:absolute;を使いこなしてサイトを自由にデザインしよう！

【CSS】position:absolute;を使いこなしてサイトを自由にデザインしよう！

schedule
Tags: CSS

はじめに

Webサイトをデザインする上で、要素の位置を思い通りに調整することはとても重要です。CSSのpositionプロパティには、要素の配置方法を指定する様々な値がありますが、中でもposition: absolute;は、他の要素との関係性にとらわれず自由に配置できる、柔軟性の高い設定です。

この記事では、position: absolute;の仕組みから、具体的な使用例、注意点までご紹介します。position: absolute;をマスターして、思い通りのWebサイトデザインを実現しましょう。

position:absolute;とは？

position: absolute;は、要素を 文書の通常のフローから完全に取り除き 、指定した座標を基準に配置する設定です。通常のフローから外れるため、他の要素はあたかも、その要素が存在しないかのように振る舞います。

position:absolute;の基本的な使い方

position: absolute;で要素を配置するには、大きく分けて以下の3つの手順を踏みます。

  1. 対象の要素にposition: absolute;を設定する
  2. 基準となる位置を決める
  3. top, right, bottom, leftプロパティで位置を調整する

それぞれの項目について、詳しく見ていきましょう。

1. 対象の要素にposition: absolute;を設定する

まずは、位置を絶対配置したい要素に対して、position: absolute;を指定します。

.box {
  position: absolute; 
}

2. 基準となる位置を決める

position: absolute;を設定した要素は、 最も近い祖先要素のうち、positionプロパティがstatic（初期値）以外に設定されている要素 を基準に配置されます。もし、そのような祖先要素が存在しない場合は、 ドキュメント全体 を基準に配置されます。

例えば、以下のようなHTML構造の場合、.child要素は、親要素である.parent要素を基準に配置されます。

<div class="parent">
  <div class="child">
  </div>
</div>

.parent {
  position: relative; /* ここではposition: relative;とします */
}

.child {
  position: absolute;
}

3. top, right, bottom, leftプロパティで位置を調整する

基準となる位置が決まったら、top, right, bottom, leftプロパティを使って、要素の具体的な位置を調整します。これらのプロパティには、pxや%などの単位で数値を指定します。

例えば、基準位置から右に100px、下に50pxの位置に要素を配置したい場合は、以下のように記述します。

.box {
  position: absolute;
  top: 50px;
  left: 100px;
}

position:absolute;を使用する際の注意点

position: absolute;は便利な反面、使用にはいくつか注意すべき点があります。

  • 要素が文書のフローから外れる: position: absolute;を設定した要素は、通常のフローから外れるため、他の要素のレイアウトに影響を与える可能性があります。
  • 基準となる位置に注意する: 要素は、常に想定した位置を基準に配置されるとは限りません。positionプロパティの設定状況をよく確認しましょう。
  • レスポンシブ対応: 画面サイズが変わると、意図したとおりに表示されない場合があります。メディアクエリなどを活用し、画面サイズに応じて調整する必要があるかもしれません。

position:absolute;の活用事例

position: absolute;は、以下のような場面で特に役立ちます。

  • モーダルウィンドウの実装
  • ドロップダウンメニューの作成
  • ツールチップの実装
  • 画像やアイコンを重ねて表示する

まとめ

今回は、position: absolute;について解説しました。position: absolute;は、要素を自由に配置できる便利な設定ですが、その特性を理解した上で使用することが重要です。

ぜひ、この記事を参考にして、position: absolute;を使いこなせるようになりましょう。

関連記事