WEB制作において、どの要素が前面にきて、どの要素が背面にくるなどの重なり具合は重要です。レイヤー順、スタック順などとも呼ばれたりします。例えば、一番背面に基本カラー(例白色や灰色、クリーム色)を設定して、その上に要素を載せていく。また、ヘッダーを固定した場合、常に他の要素よりは前面にきてほしいなど、デザインによっても重なり順は重要になってきます。その順番を調整するのが、z-indexです。
z-indexの数字が大きいほど、前面にきます。z-index: 1;より、z-indes: 10;の方が前面になります。これも設定すれば、必ずしも数字が大きい方が前面にくるわけではなく、効かないケースもあるようです。z-indexはposition
がstatic(例:relative
、absolute
、fixed
、sticky
)に設定されている要素にのみ適用されます。positionのデフォルトはstaticになっています。また、z-indexの設定が多くなってくると幾つに設定すればいいか、わからなくなってしまうケースもあります。苦し紛れにimportant同様、z-index: 999;にすると前面にくるケースがありますが、これも多用はできないので、注意が必要です。