【css】javascriptで挿入した要素のz-indexが効かなかった時の原因と対応メモ

css詳しくないのに見よう見まねで書いててjavascriptで生成した要素のz-indexがどうにも効かなくてハマりました。
そのときの対応をメモ。

ググってるz-index当てる要素はpositionがrelativeかabsoluteじゃないといけないって記事があってコレが原因って線でずっと調べてたけど全然直らなくて途方にくれました。
結論からいうと対象の要素の親要素にz-indexが当たっててそのz-indexの方が大きかったということでした。。。

上手く動かないコード

<div style="z-index:1000">
  <!-- javascriptで動的に挿入した要素 -->
  <div style="z-index:1001">要素B</div>
</div>

<!-- javascriptで動的に挿入した要素 -->
<div style="z-index:1000">要素A</div>

わかりずらいですが要素Aをページ全体に置いて、その上に要素Bを重ねたいというのがやりたいことでした。
要素Bを入れる要素の親にz-indexがセットされていてそれが要素Aのz-indexよりも大きかったので表示されない(というか見えない)というオチでした。

修正したコード

<div style="z-index:1000">
</div>

<!-- javascriptで動的に挿入した要素 -->
<div style="z-index:2000">要素A</div>

<!-- javascriptで動的に挿入した要素 -->
<div style="z-index:2001">要素B</div>

まとめ

何が言いたいかわかりずらくなったけど、今回は不特定多数の人にタグを入れてもらってjavascriptでdomを挿入するような機能でした。
同じようなことでハマっている人がいたら参考になったら幸いです。てかまた忘れた頃に同じ事やりそう。。。以上です