「position」プロパティは、
画像や文章などの配置位置を指定するプロパティ。

「position」プロパティだけでは、
配置を指定することができない。
「position」は、配置の基準を指定するプロパティ。

配置指定するのに、必要なプロパティは、

・position
・top
・bottom
・left
・right

など。
「position」プロパティ以外のプロパティで、
実際に配置される場所の位置指定をサイズで記述する。

サイズ指定する基準位置は、
「position」プロパティで指定する。
指定する値によって、
基準位置が異なるので、
指定値による違いの確認が必要。

慣れるまで、
基準位置の考え方が複雑。
使用していくうちに慣れます。

INDEX

■ 「position」プロパティの使い方

■ 「position」プロパティを使うコツ
■ 「position」プロパティの値
■ 位置の種類

「position」プロパティの使い方

「position」プロパティは、
レイアウトデザインでは、よく使われるプロパティの一つで、
「position」で、配置形式を選択して、
「top」「bottom」「left」「right」を使って配置位置を指定します。

「position」プロパティを使うコツ

「position」プロパティは、
機能してくれない時があります。
そんな時は、下記をチェック。

・ブロック要素になっていること
・幅の指定がされていること
・重ねて表示させる場合は、手前のレイヤーを指定している（z-index）

などです。
他にもあるかもしれませんが、
今、思いつくのはこれだけ。

最初の頃は、なぜ機能しないのかわからないことが多かったですが、
必ず原因があるので、
経験を積むしかありません。

「position」プロパティの値

「position」で、指定できる値は、

・static
・relative
・absolute
・fixed
・sticky

など。
各値には特徴があり、
指定すると、「基準点」が変わってくる。

値	説明
static	「static」は、デフォルトの設定値で、文書の通常のフローに従って配置される。「top」「right」「bottom」「left」「z-index」プロパティは効果がない。
relative	「relative」が指定されると、「static」と同じ、通常の配置位置に配置され、「top」「right」「bottom」「left」に値を指定して、位置をコントロールします。「z-index」の値が「auto」でない場合、新しいレイヤーを作成して配置する。「table-*-group」「table-row」「table-column」「table-cell」「table-caption」への指定は未定義。
absolute	「static」の配置とは異なり、通常のページレイアウトではなく、直近の親要素、もしくは、ページの最上部を基点として、「top」「right」「bottom」「left」の値を指定して配置位置を指定する。「z-index」の値が、「auto」ではない場合、新しいレイヤーに作成される。
fixed	「static」の配置とは異なり、通常のページレイアウトではなく、絶対位置への配置となる。「absolute」と同じだがが、スクロールしても位置が固定されたままになる。印刷文書の場合、要素は各ページの同じ位置に配置されます。
sticky	「sticky」を指定すると、その親要素が「Sticky Container（スティッキーコンテナ）」となり、スクロールすると、「sticky」を指定した要素だけが、その場に固定されています。そのような要素を「粘着要素」という。配置位置は、「top」「right」「bottom」「left」で相対的に、位置指定します。「sticky」は、常に新しいレイヤーに作成されます。「粘着要素」は、直近の親要素がスクロールしない場合でも、親要素に「粘着」する。
inherit

位置の種類


位置指定要素	位置指定要素とは、「position」の設定値が、「static」以外の「relative」「absolute」「fixed」「sticky」のいずれかである要素。
相対位置指定要素	相対位置指定要素とは、「position」の設定値が、「relative」である要素。「top」「bottom」プロパティは、垂直方向のオフセットを指定。「left」「right」プロパティは、水平方向のオフセットを指定。
絶対位置指定要素	絶対位置指定要素とは、「position」プロパティで、「absolute」「fixed」を指定する。「top」「right」「bottom」「left」で、親要素の各辺からのオフセットを指定する。要素にマージンがある場合は、オフセットにマージンが追加される。この要素は内容のために新しいブロック整形コンテキスト (BFC) を生成する。
粘着位置指定要素	粘着位置指定要素とは、「position」の設定値が「sticky」の時は、親要素の中で、位置が固定され、スクロールしても、その位置に止まるように配置（粘着）され、スクロールの終端に到達すると、終端位置に固定される。逆方向も同じ動きをする。

Back