positionプロパティは要素の配置方式を指定し、topプロパティ, bottomプロパティ, leftプロパティ, rightプロパティによって配置する位置を指定します。非視覚環境での観覧者に配慮したメニューを読み飛ばすリンクなど、positionプロパティはアクセシビリティを高めるためのテクニックにも応用されています。また、CSS2 において、適用対象から除外されていた生成内容の要素についても、改訂版 CSS2.1 では指定が可能となっています。ただし、"display : none ;" を指定された要素や適用対象にはなってもルート部（html要素と body要素）に対する指定は無効です。
staticrelativeabsolutefixedstaticpositionプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。
statictop", "bottom", "left", "right" の位置を指定するプロパティの効果は無効であり（適用対象にならないため）、その要素が本来レンダリングされる通常通りの位置に配置される。relativetop", "bottom", "left", "right" の各プロパティで要素の配置されている元の位置からどれだけずらすかを指定する相対的な位置指定となる。これを相対配置と呼ぶ。absolutetop", "bottom", "left", "right" の各プロパティで包含ブロックの各辺からどれだけ離すのかを指定する絶対的な位置指定となる（祖先要素に位置指定されている要素がなければ、初期包含ブロックを基準とする）。これを絶対配置と呼ぶ。fixedabsolute" に従って配置された後（つまり、位置指定の基点は "absolute" と同じ）、スクロール機構によって連続的にアクセス可能な連続メディアでは、表示域に対して固定され、スクロールしても動かないようにレンダリングされる。これを固定配置と呼ぶ。"absolute" の説明を補足しておくと、たとえば、デフォルトでは一番最初の包含ブロックである初期包含ブロックは、html要素の各辺が基準になるので、スクロール分も含めてページ全体が基準になります。つまり、topプロパティ・leftプロパティはページの左上が原点に、bottomプロパティ・rightプロパティはページの右下が原点となります。そして、html要素に対して、widthプロパティ, heightプロパティを指定することで、初期包含ブロックの横幅・高さを指定することもできます。
positionプロパティで "static" 以外の値が指定されている要素のことを位置指定されている要素と呼び、その内の "absolute", "fixed" のいずれかの値が指定された要素のことを絶対位置決め（absolute positioning）の要素と呼びます。そして、絶対位置決めに対して、"relative" の値が指定された要素を相対位置決め（relative positioning）の要素と呼びます。
fixed" の値は未実装)Windows版Internet Explorer 6 は "fixed" の値を実装していません（Windiows版Internet Explorer 7 より実装）。"fixed" は表示域に対してメニュー部分を固定した表現をする場合などに用いられるのですが、現状では、この機能に対応していない Windows版Internet Explorer 6 を利用するユーザーが多いため、overflowプロパティを応用した表現が用いられています。また、もう一つの代替え方法として、Windows版Internet Explorer 7 から新たに子供セレクタへの対応したことに目をつけたテクニックがあります。
div#menu { position : absolute ; }
body > div#menu { position : fixed ; }
これは、子供セレクタを利用して、body要素内において直接の子要素となる "div#menu" のみを適用対象としています。Windows版Internet Explorer 6 は "position : absolute ;" には対応していますが、子供セレクタには対応していないため、"body > div#menu { position : fixed ; }" の指定を無視してくれます。これにより、子供セレクタに対応している Windows版Internet Explorer 7, Netscape, Firefox, Opera, Safari などの UA において、"fixed" の指定が上書きされて絶対配置から固定配置が有効となります。
<img src="map.gif" width="426" height="267" alt="地図" /><br /> <img src="building.gif" width="42" height="53" alt="ビル" style="position : relative ; top : -220px ; left : 118px ;" /> <img src="factory.gif" width="54" height="52" alt="工場" style="position : relative ; top : -110px ; left :150px ;" /> <img src="hospital.gif" width="44" height="44" alt="病院" style="position : relative ; top : -232px ; left : 70px ;" /> <img src="house.gif" width="53" height="44" alt="私の家" style="position : relative ; top : -230px ; left : -120px ;" /> <img src="park.gif" width="53" height="52" alt="遊園地" style="position : relative ; top : -300px ; left : -25px ;" /> <img src="police.gif" width="53" height="53" alt="警察署" style="position : relative ; top : -130px ; left : 30px ;" /> <img src="resta.gif" width="47" height="54" alt="レストラン" style="position : relative ; top : -300px ; left : -50px ;" /> <img src="school.gif" width="54" height="52" alt="学校" style="position : relative ; top : -220px ; left : 5px ;" />
サンプルのように画像などを好きな位置に配置して、要素同士を重ね合わせることも可能です。ただし、なんでもかんでも好き勝手な場所に配置できるのを逆手にとって、アクセシビリティの低下を招くような悪い方へと一人歩きしていってしまった使われた方が非常によく見かけられます。
たとえば、IBM社の有名な HTMLエディタソフトにホームページビルダー（Hompage Builder）がありますが、ホームページビルダーに用意されている「どこでも配置モード」の機能は、"position ; absolute ;" による絶対配置を利用しています。ただし、この機能には大きな落とし穴があり、使い方によっては、視覚環境の UA を通して見た文書の表示内容と実際に記述されているソースとの内容がまったく違ったものとなってしまう場合があります。つまり、制作者スタイルシートの使用をオフにした場合など、見た目の内容ではなく、実際のソース通りの文脈の流れでは意味が通じないような内容構成になっているのです。これが非視覚環境であれば、その影響は著しくソースを上から下に順に読み上げていくため、記述されている情報を正しく把握することは困難でしょう。このように制作者が意図する情報の流れと、実際の情報の流れとに大きな違いが生じてしまい、極端にアクセシビリティを低下させてしまうことにもなりかねないので、positionプロパティの使用には十二分に注意してください。
http://w3g.jp/css/display_position/position直近の制作実績等：大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!