....z-indexが効かん！
現在インターン先で取り組んでいるプロジェクトで、z-indexが効かないでドブカスになっており、困ったのですが簡単なところで解決策が見つかりました。
今回の使用技術: Next.js TypeScript Tailwind CSS
どの要素がどのように重なるかというのは奥が深かったりします。
今回は効かない理由について書きますが、z-indexについてよく知っておくことをお勧めします。
absolute、relative、fixedなどstaticではない要素は、 デフォルトのstaticな要素よりも記述順番に関係なく 必ずZ軸上で手前に描画される
staticな要素にはz-indexが指定できない
opacityが指定されてるとz-index:0同士でもその要素が上に来る
スタックコンテキスト
などいろいろありますが、ここら辺はググれば神達が記事を書いてくれております。
！今回はTailwind CSSでz-indexが効かなかった時に解決した方法です。通常のz-indexが効かなかった場合とは違うパターンです。
原因: Tailwindがデフォルトで設定している値ではなかった
この画像がTailwindの対応するz-の値です。つまり、z-0~50までは10刻みで指定できますが、60や70になると指定してもスタイリングは適用されません。
この場合、tailwind.config.ts(js)ファイルにzIndexプロパティを追加してあげる必要があります。
なので適当に530000とか打っても意味がないわけです。
設定方法
// tailwind.config.js
theme: {
...
extend: {
zIndex: {
"60": "60",
"70": "70",
"90": "90",
},
このように指定してあげれば、60,70,90のz-indexが適用可能になります。
また、configに適用しなくともarbitrary valuesを使えば無理やりスタイリングできます。
<div className = "z-[100]">hoge</div>
tailwind.config.tsの場合はd.ts形式の型ファイルがtailwindcssディレクトリにあるはずなのでみて見てください。その型に従った方法でプロパティを追加しましょう。
基本上記の例でうまくいきます。