【TEC Log】firefox z-index問題 - nachinekoのブログ

firefoxが最近アップデートしましたね。
ブラウザの感じがすごく変わっていて、別のブラウザ開いたのかと思いました。

さてさて、それが原因かどうかはわからないのですが、
firefoxだけなぜか要素の重なりが異なっていて、
beforeが次の要素の下に入り込んでしまう事象に陥りました。

z-indexらへんをいじればいいんだろうなとは思ったのですが、
うーん、なかなか。
解決というより、考え方を調べて、設定できましたのでLogを。

【やりたいこと】
擬似要素を親要素と一緒にレイヤー一番上に設定したい。
（吹き出しの三角部分を想定）
（吹き出しのcssは割愛）

【HTML】

<div class="m-mainTab">
 <a class="m-mainTab__link" href="" title="">Menu ttl</a> // ここに擬似要素を設定している想定
</div>
<div class="m-subTab">
</div>

【CSS】

.m-mainTab{
 position:relative;
 z-index: 0;
}

【HowTo】
親要素にpositionとz-indexを設定
（解説は参考サイト様をご確認ください）

参考サイト様の解説がとてもわかりやすかったです。