cssのpositionとz-indexについてまとめています。
サマリ
- position:relativeの子要素にposition:abusoluteを指定すると、親要素の高さが消える
- デフォルトではposition:staticが設定されている
- positonでstatic以外、かつz-indexが指定されていると、スタックコンテキストを形成しているという
- 特定要素に対して上記を設定している場合は、ローカルスタックコンテキストを形成しているという
- スタックコンテキストには2種類ある
- htmlが形成するルートスタックコンテキスト、各要素にpositionとz-indexを指定するローカルスタックコンテキスト
- z-index:autoとした場合には、スタックコンテキストは形成されない
- position:stickyは親要素の高さ内でスクロールするとついてくる
- 親要素にoverflow: hiddenが指定されている場合はstickyの効き目はなくなる