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

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

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

静的ポジショニングの例

CSSの静的ポジショニングの基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p {
   margin: 0;
}
div:first-child {
   position: static;
   background-color: orange;
   text-align: center;
}
</style>
</head>
<body>
<div>Demo text</div>
<p>This is demo text wherein we are displaying an example for static positioning.</p>
<div></div>
</body>
</html>

出力結果

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

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

この例では、最初のdiv要素に position: static を指定していますが、要素は通常どおりの位置に表示され、top や left などを指定しても位置は変化しません。

relative・absolute・fixedとの比較例

次に、static 以外の主な配置方法である 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; /*relative to parent d1*/
}
#d3 {
   position: fixed;
   width: 30%;
   top:10em; /*relative to viewport*/
}
</style>
</head>
<body>
<div id="d1">This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. 
This is demo paragraph. This is demo paragraph. 
<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>

出力結果

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

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

各positionプロパティの違いまとめ

  • static（静的配置）：デフォルト値。通常のドキュメントフローに従い、top・left などのオフセット指定は無効になります。
  • relative（相対配置）：通常の位置を基準に、指定したオフセット分だけ相対的に移動します。
  • absolute（絶対配置）：position が指定された最も近い親要素（この例では #d1）を基準に配置されます。
  • fixed（固定配置）：ブラウザのビューポート（表示領域）を基準に固定され、スクロールしても位置が変わりません。

このように、position プロパティの値によって要素の配置基準が大きく変わるため、レイアウトを組み立てる際にはそれぞれの特性を理解しておくことが重要です。

  1. CSSのz-indexプロパティを使って要素を重ねて表示する方法

    CSSのz-indexプロパティとは CSSのz-indexプロパティを利用すると、開発者は複数の要素を互いに重ねて（積み重ねて）表示することができます。z-indexには正の値または負の値を指定でき、数値が大きいほど要素は前面（上層）に配置されます。 注意： 重なり合う要素にz-indexが指定されていない場合、HTMLドキュメント内で最後に記述された要素が前面に表示されます。 また、z-indexは position: relative;、position: absolute;、position: fixed;、position: sticky; のように位置指定された要素に対してのみ有効

  2. CSSのtext-indentプロパティでテキストのインデントを設定する方法

    CSSのtext-indentプロパティを使用すると、ブロック要素内のテキストの1行目にインデント（字下げ）を設定できます。段落の冒頭を字下げして文章を読みやすくしたい場合などに活用できる、便利なプロパティです。 構文 CSS text-indentプロパティの基本構文は以下のとおりです。 Selector { text-indent: /*value*/ } 指定できる主な値は次のとおりです。 <length>：px、em、cmなどの絶対値または相対値でインデント幅を指定します。 <percentage>：包含ブロックの幅に対する割合（%）で指定します。 負