10月24日の学習

学習内容

【position】　
　ボックスの表示位置を決める配置方法を指定するプロパティ。必ず基点は左上。

• 「static」･･･通常の配置方法。ブロックレベル要素の場合は垂直方向に順に配置、インライン要素の場合は水平方向に順に配置。
• 「relative」･･･「left」「top」と併用することで、通常の配置位置から相対的にずらして配置できる。後続のボックスはrelative指定のボックスが通常位置にあるものと仮定して配置される（重なることになる）。
• 「absolute」･･･最も近い層の親ボックス（static以外の値が指定されているボックス：containerやwrapper等）を基点に「left」「top」「right」「bottom」等を用いて位置をずらして配置できる。後続のボックスはabsolute指定のボックスがないものとして配置。親ボックスがない場合は、ウィンドウ表示領域を基点。
  • illustratorのように後から配置したボックスが上に配置されるため、レイヤーの順位を変更（優先順位変更）する際は『z-index:1000;』を指定し、上に配置（1000は他のpxとまちがわないため）。
    ※z-indexとbackground-color:transparent;を併用すると、下のレイヤーにロゴ等を重ねることができる。
• 「fixed」･･･abusoluteと同様の仕組みで配置され、他のボックスの配置には影響を与えない。配置位置がウィンドウ表示領域を基点とするため、配置位置が固定され、スクロールしても常にウィンドウに対し同位置に表示される。