positionプロパティは、要素の配置方法を指定します。
指定した値によって、ボックスを相対配置したり絶対配置したりと言った事ができ、これらの配置になる場合は、top, right, bottom, leftプロパティと合わせて指定する事で配置される位置を指定する事が可能です。

floatプロパティと同様にレイアウト関係で使ったりしますが、大枠などのレイアウトより、特定のボタンを配置するのに使ったりと、ちっこい部分で使う事が多いです。

このpositionプロパティを駆使する事で色んな配置ができますが、要素を重ねまくって情報が損なわれてしまったり、文書構造を完全に無視した配置などは避けましょう。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

static｜relative｜absolute｜fixed｜inherit

初期値

static

適用される要素

全ての要素

継承

しません

パーセント値

N/A

メディア

visual

値の解説

static

ボックスは通常フローにて配置されます（指定が無いのと同じ）。この値が指定されている場合、top, right, bottom, leftプロパティは適用されません。

relative

ボックスは通常の位置から相対配置されます。この相対配置されたボックスの位置はtop, right, bottom, leftプロパティで指定します。後続するボックスは、相対配置されたボックスが通常配置された位置に有るものとして配置されます。

absolute

ボックスは絶対配置されます。絶対配置の基点は、包含ブロックからの距離になります。
包含ブロックからの距離と言うと分かり難いかもしれませんが、親要素に位置指定されている要素（positionプロパティの値がstatic以外の要素）がある場合はその要素が包含ブロックを設置するため、その要素の左上が基点になり、位置指定されている要素が無い場合、包含ブロックはルート要素になるので、ウィンドウの左上が基点になります。
ボックスの位置（場合によっては大きさ）はtop, right, bottom, leftプロパティで指定します。
この絶対配置されたボックスは通常フローから外されるため、兄弟要素の配置には影響せず、他のどの要素のマージンとも相殺されません。また、要素はブロックレベル要素になり、floatプロパティの指定が有った場合の値は、強制的にnoneにされます。

fixed

ボックスはabsoluteと同様に配置されますが、位置が固定されるためスクロール等をしても移動しません。
同様に配置と言っても、固定配置の場合、包含ブロックは閲覧領域に対して設定されるため常にウィンドウの左上を基点とします。なお、この値はIE6では対応していません。

要素が重なった場合

各要素がpositionプロパティによって重なった場合に、ボックスが前面なのか背面なのかはスタックレベルによって決定され、このスタックレベルはz-indexプロパティによって変更する事ができます。また、スタックレベルが同じ場合はHTMLソース上、後から書かれている要素が前面に表示されます。

通常、相対、絶対配置のサンプル

<p class="staticPositon">
通常配置 static
</p>
<p class="relativePositon">
相対配置 relative
</p>
<p class="absolutePositon">
絶対配置 absolute
</p>

p {
  width: 150px;
  height: 150px;
}

p.staticPositon {
  position: static;
  background: #ccc;
}

p.relativePositon {
  position: relative;
  top: -30px;
  left: 50px;
  background: #ccf;
}

p.absolutePositon {
  position: absolute;
  top: 40px;
  left: 180px;
  background: #fcc;
}

特に難しい事をしていない、通常、相対、絶対配置のサンプルです。
このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

通常配置 static

相対配置 relative

絶対配置 absolute

固定配置のサンプル

<p class="fixedPositon">
固定配置 fixed
</p>

p.fixedPositon {
  position: fixed;
  bottom: 20px;
  right: 50px;
  width: 10em;
  height: 3em;
  padding: 0.5em;
  font-size: x-small;
  background: #cfc;
  z-index: 150;
}

固定配置のサンプルです。右下に固定表示されているのが実際のサンプルになります。
なお、IE6はfixedに対応していないため、このすぐ下に表示されてしまいます。

固定配置 fixed

見出しの横にボタン設置のサンプル

<div class="sectionHeader">
<h3>いつかのメリークリスマス</h3>
<p>2022年12月25日</p>
<p class="more"><a href="#">もっと見る</a></p>
</div>

.sectionHeader {
  _zoom: 1;
  position: relative;
  margin: 20px;
}

.sectionHeader p {
  text-align: right;
}

.sectionHeader .more {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: x-small;
}

.sectionHeader .more a {
  padding: 2px 5px 2px 14px;
  background: #fff url(../img/item/mark_basic.gif) no-repeat 5px center;
  text-decoration: none;
  color: #333;
}

.sectionHeader .more a:hover {
  color: #fd762b;
}

ちょっと実用的なサンプルって事で、見出しの横に有るボタンをpositionプロパティでやった場合のサンプルです。
.sectionHeaderにposition: relative;の指定をする事で基点を作り、.moreの位置を指定しています。.sectionHeaderの_zoom: 1;の指定はIE6対策で、指定が無いとIE6だけ表示位置がずれてしまいます。これは、hasLayoutが関連しているので、.sectionHeaderにwidthプロパティを明示したりする事でも対処可能です。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

いつかのメリークリスマス

2022年12月25日

もっと見る

floatプロパティとpositionプロパティを覚えて自由に使いこなす事が出来れば、大半のレイアウト、デザインが組めるようになると思います。