昨日、z~indexが効かない理由に階層の違いをあげました。もう一つはpositionプロパティがstaticだと適用されません。static以外の要素(relative, absolute, fixed, sticky)にのみ適用されます。デフォルトはstaticのため,static以外のどれかのpositionをつける方法があります。
relative:要素は通常の位置から相対的に移動しますが、文書の流れには影響しませんabsolute
:要素は最も近い位置付けされた祖先要素に対して絶対位置付けされますfixed
:要素はビューポートに対して固定位置付けされます。sticky
:要素はその位置に基づいて、相対的かつ固定的な位置付けの両方の特性を持ちます。
デザインにもよりますが、最も影響のないpositon: relative;をつけることが多いです。重要でありながら、奥が深いz-indexは階層とpostionを意識すると解決するケースが多いかもしれません。