1.5 css位置決め-stacking contextsとBFC-refer to『CSS in Depth』

Stacking contexts

同様に、BFC(block formatting contexts)はドキュメントフローの重複問題を解決する.stacking contextはレンダリング階層の問題を解決します.透明度を使用すると、ドキュメントの階層の問題が明らかになります.これは、同時に積層コンテキストが確立されているためです.
前のgridレイアウトのようにドキュメントに2次元レイアウトを提供し、stacking contextはドキュメントに3ビットデカルト座標システムを構築します.z-index:の値は符号なしです.
オクルージョンの順序で、後者は前者の上にあります.

ノードstacking context

z-indexの値は負数

である.

非位置決め要素

z-indexの値はauto

である.

z-indexの値は整数

である.

配置要素

専有価値

1. z-index
2. left
3. right
4. top
5. button

position: static

任意の要素のデフォルトはstaticです

position: fixed

fixedはウィンドウに対して位置決めされます.

position: absolute/relative

絶対値absoluateは、最近の位置決め要素の親に対してrelativeを親として使用するのが一般的であり、relativeは、位置決め要素と静的要素(ドキュメントフロー)との間の遷移に相当し、ドキュメントフローに影響を及ぼさずに相対位置を変換する.
relativeはabsoluteとfixedのように暗黙的な設定要素の幅が高く、相対変位しかできない.

新しい値:position:sticky

fixedのようにウィンドウに対して移動できますが、1つのコンテナでのみ移動でき、親コンテナを突破できないため、スクロールロックの目的を達成できます.サポートは完璧ではなく、chromeも一部のサポートにすぎません.