ブラウザゲーム制作という特殊環境でz-indexが効かなかった場合の避難方法

今回はz-index要素が効かなかった場合の要素の重なりについて
自分なりの結論を出したので書こうと思う。
今回は自分が遭遇したポップアップボタンのz-indexについて深堀りしようと思う。

まず、大前提としてtableタグと入れ子と兄弟関係のz-indexの相性悪すぎ。
普通の方法では解決できないと諦め、多様なアプローチから開発を試みた。

結論はhmtl上書きが優先されるということに気付き
（MAP上のボタンが下方のユニットだけに覆い隠されるという状態だった）

ではどうすればこの状態を打破できるかと試行錯誤した結果、
html後勝ちなら全てポップアップボタンのノードだけ後書きにして
それをあとでポップアップさせればいいじゃん！と思いつき

結果、普段隠れているボタンの要素を全て分けてhtmlの最下部に付けたし
それを後でJSによってポップアップさせることで要件を満たした。

また、この際スクロールするとボタンの出現位置が変わるという事態にも遭遇したが、
ChatGPT様の教えで下記のようにスクロール量を測定して固定する
という方法を用いることで全ての課題をクリアした。

containerid というdiv要素受け取った後

var menu = document.getElementById(id.value);

// 現在のスクロール位置を取得
var scrollY = window.scrollY || window.pageYOffset;

// ボタン位置の取得
var elementRect = containerid.getBoundingClientRect();
var elementX = elementRect.left;
var elementY = elementRect.top + scrollY; // スクロール位置を考慮

var buttonX = elementX;
var buttonY = elementY;

// 表示
menu.style.zIndex = 40;
menu.style.left = buttonX + "px";  // 左右の位置は変更なし
menu.style.top = buttonY + 35 + "px";
menu.style.visibility = "visible";

いやー久々の大仕事だった、JSやCSS、HTMLの細かい仕様で
ここまで苦い思いをさせらたのはいつ以来だろうか・・・

そしてz-index、お前さんはよくぞ俺を苦しめてくれたよ
結局html上書きで全て解決させられるとは思わなかったよ・・・