レイヤーの
重なりを
制御するZ‐Indexの制限を解消

Z-indexを大きくしているのに少ない数値のレイヤーの下になってしまう。

下の画像のようにマウスオーバー等でヘルプ画面などをポップアップさせる仕様はよくあると思います。
さらによくあるのが、そのポップアップが下のコンテンツに隠れてしまうケースです。
隠れているポップアップのZ-indexを乗っかっているレイヤーより高く設定しているのにです。

下のレイヤーに隠れてしまうサンプル：https://labo.studio-happyvalley.com/zindex/probrem1/sp/

親同士の溝がZ-Indexの超えられない壁だった。

原因はターゲットの親のZ-indexが関係しています。上のサンプルを分かりやすいようにすべてのポップアップを一度に表示させてみます。
それぞれのポップアップの親レイヤーのZ-Indexを調べてみると、すべてが同じ値となっています。（Z-indexが同じ場合、下の階層の方が上に表示されます。）
つまりどれだけポップアップのZ-indexを大きくしても親同士のレイヤーの上下関係が下の場合、上の階層を超えることはできないのです。
MDNにも『重ね合わせコンテキストは HTML 要素の階層構造の部分集合です。』と記載があります。
こんなところにも超えられない壁があるとは！

上の親Zindexを一番大きくし小さくすると目先の問題は解消。

じゃあ上から下へ順番にZ-Indexを小さくしてやれば解決かと思いきや、さっきの問題は解決しますが、今度は上のレイヤーが下のポップアップに被ってしまいます。あっちを立てればこっちが立たずってやつですね。ま、ポップアップを下方向のみにスライドダウンさせるなど、上に食み出ない設定にすればこれでもOKですが・・・。

Z-indexを逆にしてみたサンプル：https://labo.studio-happyvalley.com/zindex/probrem1/revers/

最も簡単な解決方法：Javascriptでポップアップの親のZ-Indexを大きくする。

最も簡単な解決方法はjavascriptでターゲットの親のZ-Indexを高く設定してあげる方法です。一度に一個しかポップアップしないヘルプパレットなどの場合はこの方法が最もスマートで簡単です。
当然、全てのポップアップを常に表示させる場合だと、この方法ではうまくいきません。が、まあ、そんな常時表示させるようなデザインはあんまり用途はないと思いますが。コンテンツが隠れて邪魔なので。

問題解決サンプル：https://labo.studio-happyvalley.com/zindex/probrem1/fixed/sp

重ね合わせコンテキスト解説ページ by MDN：https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context