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

CSSの絶対配置（position: absolute）とは？基準となる祖先要素と使い方を実例で解説

CSSにおける絶対配置（absolute positioning）とは、position: absolute; を指定した要素が、最も近い位置指定された祖先要素（positioned ancestor）を基準として配置される仕組みのことです。

ここでいう「位置指定された祖先要素」とは、relative、absolute、fixed、sticky のいずれかが設定された要素を指します。もし該当する祖先要素が存在しない場合は、初期包含ブロック（通常はページ全体）が基準となります。

実務では、親要素に position: relative; を指定し、その中に position: absolute; の子要素を置くことで、意図した位置に正確に要素を配置するテクニックがよく使われます。

絶対配置のサンプルコード

それでは、実際の例を見てみましょう。親要素 div.demo1 には position: relative; を、子要素 div.demo2 には position: absolute; を指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
div.demo1 {
   position: relative;
   color: white;
   background-color: orange;
   border: 2px dashed blue;
   width: 600px;
   height: 200px;
}
div.demo2 {
   position: absolute;
   color: white;
   background-color: orange;
   border: 2px dashed blue;
   top: 50px;
   right: 0;
   width: 300px;
   height: 100px;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
<div class="demo1">position: relative;
<div class="demo2">
position: absolute;
</div>
</div>
<p>This is another demo text.</p>
<p>This is demo text.</p>
<p>This is demo text.</p>
</body>
</html>

コードのポイント

  • 親要素（demo1）：position: relative; を指定することで、子要素の配置基準になります。
  • 子要素（demo2）：top: 50px; と right: 0; により、親要素の上端から50px下、右端にぴったり寄せた位置に表示されます。
  • 子要素はドキュメントの通常フローから外れるため、他の要素のレイアウトには影響しません。

実行結果

上記のコードをブラウザで表示すると、オレンジ色の大きな親要素（position: relative;）の中に、小さな子要素（position: absolute;）が右上に配置されていることが確認できます。

CSSの絶対配置（position: absolute）とは？基準となる祖先要素と使い方を実例で解説

このように、絶対配置を使いこなすことで、バッジやラベル、モーダルウィンドウなど、特定の位置に正確に要素を重ねて表示するUIを簡単に実装できます。

  1. CSSの静的ポジショニング（position: static）とは？基本と実例をわかりやすく解説

    CSSにおける静的ポジショニング（static positioning）とは、要素を特別な配置を行わず、通常のドキュメントフローに従って表示する配置方法です。position: static が指定された要素は、left、right、top、bottom といったCSSの配置プロパティの影響を一切受けません。これはCSSにおけるデフォルトの配置方法でもあります。 静的ポジショニングの例 CSSの静的ポジショニングの基本的な例を見てみましょう。 <!DOCTYPE html> <html> <head> <style> p {   &nb

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

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