W3G

positionプロパティの値

positionプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

static

"top", "bottom", "left", "right" の位置を指定するプロパティの効果は無効であり（適用対象にならないため）、その要素が本来レンダリングされる通常通りの位置に配置される。

relative

その要素が本来レンダリングされる通常通りの位置に配置され、"top", "bottom", "left", "right" の各プロパティで要素の配置されている元の位置からどれだけずらすかを指定する相対的な位置指定となる。これを相対配置と呼ぶ。

absolute

包含ブロック（祖先要素のうち、もっとも近い祖先の要素にあたるブロックボックスを形成する要素の内容領域）の各辺を基準に配置され、"top", "bottom", "left", "right" の各プロパティで包含ブロックの各辺からどれだけ離すのかを指定する絶対的な位置指定となる（祖先要素に位置指定されている要素がなければ、初期包含ブロックを基準とする）。これを絶対配置と呼ぶ。

fixed

"absolute" に従って配置された後（つまり、位置指定の基点は "absolute" と同じ）、スクロール機構によって連続的にアクセス可能な連続メディアでは、表示域に対して固定され、スクロールしても動かないようにレンダリングされる。これを固定配置と呼ぶ。

"absolute" の説明を補足しておくと、たとえば、デフォルトでは一番最初の包含ブロックである初期包含ブロックは、html要素の各辺が基準になるので、スクロール分も含めてページ全体が基準になります。つまり、topプロパティ・leftプロパティはページの左上が原点に、bottomプロパティ・rightプロパティはページの右下が原点となります。そして、html要素に対して、widthプロパティ, heightプロパティを指定することで、初期包含ブロックの横幅・高さを指定することもできます。

positionプロパティで "static" 以外の値が指定されている要素のことを位置指定されている要素と呼び、その内の "absolute", "fixed" のいずれかの値が指定された要素のことを絶対位置決め（absolute positioning）の要素と呼びます。そして、絶対位置決めに対して、"relative" の値が指定された要素を相対位置決め（relative positioning）の要素と呼びます。

positionプロパティの実装状況

IE

◯：IE7よりfixedの値をサポート

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯：iOS5よりfixedの値をサポート

Android

◯：Android2.2よりfixedの値をサポートしているが、user-scalable=noの併用が必須。Android4.0より指定不要

スマートフォンデバイスにおけるposition : fixed ;はバグが多いことで有名です。Androidでは2.2以降より固定配置をサポートしていますが、文書内に<meta name="viewport" content="user-scalable=no" />の指定が含まれていなければ無効化されます。この問題は、Android4.0より指定不要になっています。

#menu { position : absolute ; }
html > body #menu { position : fixed ; }

サンプル

<div style="position:relative; width:10em; height:7em; margin:0 auto;">
<div style="width:5em; height:1em; background:black; position:absolute; top:0; left:0;"></div>
<div style="width:5em; position:absolute; top:2em; left:0; text-align:center;">◯</div>
<div style="width:5em; height:1em; background:black; position:absolute; top:0; left:6em;"></div>
<div style="width:5em; position:absolute; top:2em; left:6em; text-align:center;">◯</div>
<div style="position:absolute; top:3.5em; left:5em; text-align:center;">▲</div>
<div style="width:5em; height:1em; background:black; position:absolute; bottom:0; left:3em;"></div>
</div>

positionプロパティはアクセシビリティを高めるのに用いることもできれば、使われ方次第では極端にアクセシビリティを低下させてしまう代表例です。positionプロパティを用いれば、サンプルのように各要素を好きな位置に配置することができますが、このような使い方はもちろん好ましくありません。さらにアクセシビリティの低下を招くような悪い方へと一人歩きしていってしまった使われた方も非常によく見かけられます。

たとえば、有名な HTMLのオーサリングソフトにホームページビルダー（Hompage Builder）がありますが、ホームページビルダーに用意されている「どこでも配置モード」の機能は、"position ; absolute ;" による絶対配置を利用しています。ただし、この機能には大きな落とし穴があり、使い方によっては、視覚環境の UA を通して見た文書の表示内容と実際に記述されているソースとの内容がまったく違ったものとなってしまう場合があります。つまり、制作者スタイルシートの使用をオフにした場合など、見た目の内容ではなく、実際のソース通りの文脈の流れでは意味が通じないような内容構成になっている恐れがあります。

これは非視覚環境であれば、その影響は著しくソースを上から下に順に読み上げていくため、記述されている情報を正しく把握することが困難になります。このように制作者が意図する情報の流れと、実際の情報の流れとに大きな違いが生じてしまい、極端にアクセシビリティを低下させてしまうことにもなりかねないので、特にホームページビルダーのようにオーサリングソフトを使って手軽にpositionプロパティで配置するような使用には十二分に注意してください。