Yahoo!のユーザーインターフェイスブログ（YUIBlog）

CSSのPositionプロパティ

このプロパティは、すべての要素に適用されます。 それは5つの値を持っています。

• static
• relative
• absolute
• fixed
• inherit

位置：静的

セクション9から視覚整形モデル ：

ボックスには、に従ってレイアウト通常のボックスであり、 通常の流れ 。 top 、 right 、 bottom 、そしてleftのプロパティは適用されません。

には、注意すべき点は、このデモ

• 番目のボックスは、位置の宣言なしになる場所を正確に示しています。
• に与えられた値top "静的"コンテキストで、の計算値ので、適用されません ボックスのオフセットは常にauto 。

覚えておく事

• 場合position要素のプロパティは、の値持っているstatic 、その要素が置かれると言われていません 。
• ので、 static初期値（デフォルト値）であり、それは別の値を上書きする場合を除いて、宣言ブロック内のこのようなスタイルを含める必要はありません。

位置：相対

セクション9から視覚整形モデル ：

ボックスの位置は通常の流れ（これは内の位置と呼ばれるにしたがって計算される通常の流れ ）。 その後、ボックスはその通常の位置からの相対オフセットされています。 Bが相殺されていないかのようにボックスBが相対的に配置されている場合、以下のボックスの位置が計算されます。

には、注意すべき点は、このデモ

• ボックス"二人は"300ピクセルで下方に移動しているが、ボックス"3つの"だけでなく、次の段落では、場所に滞在。 それはボックスの背後にあるその足跡を残して、ページから解除された場合のように表示されます。 相対的に配置されるボックスを相殺する流れを邪魔しないためです。
• 相対的に配置されるボックスと重なって 、次の要素。 それは、他のボックスの前面に表示されます。

覚えておく事

• 計算値は常に=右と= -底上残されています。 の場合direction包含ブロックのはltr 、"左"勝"右"の値になります- "左"。 の場合direction包含ブロックのはrtl 、'right'の勝と"左"は無視されます。 著者らは、反対側のプロパティに等しい値を設定することで、物事の仕組みを活用することができます。
• "絶対"のモデル、とは異なりtop 、 right 、 bottom 、そしてleftプロパティボックスを（彼らはそのサイズを変更することはできません）伸ばしたり圧縮することはできません。

位置：絶対的な

セクション9から視覚整形モデル ：

ボックスの位置（および場合によってはサイズが）で指定されているtop 、 right 、 bottom 、そしてleftプロパティ。 これらのプロパティは、ボックスのを基準にしてオフセットを指定するを含むブロック 。 絶対配置のボックスは完全に通常のフローから削除（これは後で兄弟に影響が出ない）とを含むブロックに対して位置が割り当てられます。 また、しかし絶対配置のボックスはマージンを持って、彼らはしない崩壊し 、他のマージンと。

には、注意すべき点は、このデモ

• オフセットはボックスが指定されていないため、ボックス"二人は"元の位置から移動しませんでしたが、我々が使用していた場合top:0;left:0;例えば、そのボックスがになるようなビューポートの左上隅 。
• レイアウト面では、それはボックス"2"のようなものですとスタイルが設定されていたdisplay:none 。 ボックスは、 フローから削除されています。
• 流れの箱"2"外で、ボックスに"3人が"ボックス"一"（段落が続いている）に対して、最大移動しています。
• 流れ、箱"2"から削除するすべての要素と同様に水平方向に収縮包装しています。

覚えておく事

• どの '絶対'または'固定'配置された要素の場合の計算値displayありますblock 。
• どの '絶対'または'固定'配置された要素の場合の計算値floatないnone 。
• 'を含むブロックは、"ポジショニングのコンテキストを確立するボックスです。 これは、最も近い先祖によって確立されている"位置" "絶対"の、"相対的"または"固定"。これは、親ボックスは包含ブロックではないかもしれないことを意味。
• それがトップでスタイリングされたかのように絶対配置のボックスのデフォルトの位置は常に同じではない ：0;左：0;（LTRのコンテキスト内で）。 そして、これは二つの理由からです。
  1. に配置ボックスの包含ブロックは、 最も近い位置付け祖先によって設立され、いずれにも当てはまらない場合は、参照のコンテナは、ルート要素です。 に含まれているブロックのルート要素の耐用年数は初期包含ブロックと呼ばれる長方形です。 連続メディアの場合、それはの大きさがあるビューポート （画面上のウィンドウまたは他の表示領域）を、キャンバスの原点に固定されます。 この例では、ボックスをオンにすると（デフォルトではブロックを含む）ビューポートに関連して位置付けを示しています。
  2. 要素は、パディングボックスではなく 、 コンテンツのボックスも含まれているブロックの境界ボックスを基準に配置されている。 この新しい例では、パディングボックスの端は、コンテンツボックスのエッジを（含むブロックがされて触れていない場合ボックス"2"がある場所を示していますbody ）。
• ボックスのサイズが原因の可能性がありますtop 、 right 、 bottom 、そしてleftプロパティ値。 例については、すべてのプロパティをゼロにしても、その包含ブロックのパディングボックスの寸法に合わせてボックスのストレッチを行います。 参照してくださいすべてのボックスのオフセットをゼロにすること （注：IE6はボックスをストレッチしていません ）。
• 文書（のようにあるスクロールしないマスクのオーバーレイを作成するには前の例 ）、いずれかを使用するには、 fixedの代わりに absoluteまたはスタイルbodyとposition:relative 初期位置決めブロックとしては、ビューポート（スタイリングである html IEで動作しない） 。 このようなオーバーレイデモショー。
• position:absoluteトリガーのhaslayout 。

覚えておくべき最も重要なこと

この位置決め方式はフローからボックスを削除するので、それをレイアウトに使用するために悪い習慣と考えられています。

位置：固定

セクション9から視覚整形モデル ：

固定位置は、絶対位置決めのサブカテゴリです。 唯一の違いは、固定配置さボックスのために、包含ブロックによって確立されていることであるビューポート 。 の場合は連続的なメディア 、固定のボックスはドキュメントがスクロールされたときに移動しないでください。 この点で、彼らは似ています、固定背景画像 。 のためにページ付けしたメディア （文書の内容が1つ以上の個別のページに分割されている場所）、固定位置を持つボックスは各ページで繰り返されます。 これは、各ページの下部に、例えば、署名を設定することに便利です。 ページの面積よりも大きい固定された位置とボックスがクリップされます。 初期包含ブロックに表示されていない固定位置のボックスの部分は印刷されません。

には、注意すべき点は、このデモ ：

• 固定位置は絶対位置のサブカテゴリ、"絶対的な'が'固定'に対しても真であるために本当だったすべてのものなので（要素シュリンクラップ、それは流れ、などから削除されます）。
• ボックスは、 ビューポートとの関係で配置され、それはページをスクロールしていません。
• IE 6では、ボックスが表示され、静的なボックスとして 、しかし、"面白い"がある回避策そのためには。
• 文書を印刷する場合は、ボックス"2"は、すべて単一のページに表示されます。

覚えておくこと：

• ボックスの位置は、"絶対的な"モデルに従って計算されますが、それに加えて、ボックスがされ固定され 、いくつかのリファレンスを基準にして。 ハンドヘルド、投影、スクリーン、TTY、およびテレビのメディアタイプの場合には、ボックスはに対して固定されているビューポートとスクロール時に移動しません。
• ボックスの一部がビューポート領域の外にある場合、コンテンツは、目の見えるユーザーにinaccessile可能性があります。
• printメディアタイプの場合には、著者らは、各印刷ページに表示されるから要素を防止することがあります。 多分のように、@ mediaルールを使用して：

   メディアプリント{@ 
     ＃ロゴ{位置：静的;}
   } 

• のようなposition:absolute 、 position:fixedトリガーされますhaslayout IEのを。

位置：継承

の場合position:inherit与えられたボックスに指定されている、それはボックスの親のためのプロパティと同じ計算値を取得します。

IE 6と7は一緒に使用する場合を除き、このキーワードをサポートしていないことに注意してdirectionとvisibility （参照CSSのプロパティ値が継承 ）。

考慮すべき事項

ボックスのオフセット

絶対的に固定配置さ箱のために、ためにパーセンテージで設定した値があることに注意してくださいtop 、 right 、 bottom 、そしてleft 包含ブロックの寸法（親ボックスでないかもしれない）に基づいて計算されます。

"位置"と"オーバーフロー"

とスタイリングボックスoverflow:hidden 相対的に配置される要素（ネストしたボックスを）クリッピングされますが、それは常に絶対座標で配置されたものを隠すことはありません。 親ボックスは常に包含ブロック（ 最も近い先祖ではないからです"位置" "絶対"の、"相対的"または"固定"）。

その包含ブロックは、ボックス自体または前記ボックス内の要素でない限り、隠された：一言で言えば、これは絶対位置のエレメントは、オーバーフローによってスタイルがボックスの外に表示されることを意味します。 このデモページには、物事の仕組みを示しています。

マージン

著者らは関係なく位置決めスキームの要素の余白を使用することができます。

IEの場合

IEでは、"ポジショニング"ボックスには、祝福や呪いかもしれません。

• IE6で、 position:relative (with haslayout)から負のマージンとスタイルボックス防止するために使用することができるクリップされて親コンテナ（どのように参照でのボックスが配置この問題を修正）。
• これは新しいスタックコンテキストを（参照して確立することができるように要素を配置すると、IE 6および7での方法ボックスのスタックを" 乱す "ことができるテストケースを ）。

重なり順とスタッキングレベル

• ソースコード内の順序に従って、 位置付けボックスが通常の流れで山車とボックスの前に来る。
• 著者らは、 唯一の位置付けのボックスには'z - index'はプロパティを経由してスタックレベルを指定することができます。
• IE6と7では、ボックスの位置決めの単純な事実は、スタックコンテキストを（、上記の"参照設定することができますIEの場合を "）。

モバイルデバイス

PPKの記事、お読みください[第六]の位置の値を携帯電話のブラウザベンダーが実際にサポートできない理由を見つけるために、 position:fixed 。

さらなる読み物

• 視覚整形モデル
• 位置（CSSのプロパティ）
• 位置の宣言

DrLangbhaniで"ゴースト"アナロジー：

位置の相対を持つ要素は、常に流れで 、それの通常の位置からの相対オフセットされています。 言い換えれば、それは通常の状況下になる場所に対して相対的にシフトされ、それをシフトすると、その周りの要素のレイアウトには影響しません 。 それは背後にその本体を残している幽霊のようなものだ。 幅と高さを持っていると身体はその周辺に影響を与えますが、目に見えないです。 幽霊のようなボックスが移動することができますが、その位置は、まだそれから測定されるという点ではまだ古いボディに接続されています。 現在位置の絶対を持つ要素は、さらに簡単です。 それはもはや、すべての（それはレイアウトのフローから引き出されている）で、その周辺に影響を与えることはありません。 それは、今残された本体のない真のゴーストです。 限り、その兄弟要素が懸念しているとして、それはもはや存在しないような場合です。 相対的な、[位置：固定、]または位置：絶対あなたがどちらの立場でものを見つけるまで、その位置を取得するには、その親要素のそれぞれに目を通してみてください。 その要素は、参照点として機能します。 あなたが"位置付け"の要素を見つけていない場合にのみ、それが文書から相殺されます。

会話して下さい： Bloglinesの | テクノラティ

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | のreddit！