最近流行りのダークモードではz-indexの-1をかけた部分が消える？

質問は2つありまして、
1つ目

z-indexの自分用のテストページで（以下）、
http://kazan.bakufu.org/z-index_test/z-index_test.html

最近流行りのダークモード（ファイアフォックスのアドオンで白っぽい部分を黒っぽくして眩しさを軽減するもの）をオンにするとz-indexの-1にCSS設定している、class名green-boxが見えなくなりました。ダークモードをオフにすると現れます。
同ページ内の上部CSSでbocyのカラーは＃333333で設定しています。
対処法などありますでしょうか？

2つ目

上記テストページでは子要素（green-box）にpositionとz-index -1を指定して親（Base box）を前面に出しています。red-boxにも同様にして値を-2とすれば2つの子要素の前面に親が表示されます。このz-indexにマイナスを指定しない方法で、親を子よりも前面に表示させることはできますでしょうか？
1つ目の質問に少々関わりますが、マイナスを使わない方法だったらダークモードでもちゃんと表示されるのか試してみたいと思っています。

下記ページを読みました。
https://qiita.com/guimihanui/items/f88ac214a930dc512d5f
ここではz-indexマイナスで親を子の前面に出す方法ですが、これではない方法を探しています。

宜しくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

これの事だね
Dark Reader

結果から言うとz-indexのマイマス対応は無理
Dark ReaderがBodyを強制的にz-index=0に固定しているから
その下z-index=-1以降が対応できない

Dark Readerの開発者用の画面でCSS全削除とか書換したけどDark Reader自体でCSSを
z-index=0を強制してるから回避不可

というかCSSみたら!importantが大量に設定されていて
こんなのに対応するHP正直作れないよ

投稿2020/09/21 17:35

編集2020/09/21 17:36

kuma_kuma_

総合スコア2506

kazan

2020/09/21 23:20 編集

はい、Dark Readerです。画像でひと目で違いを示すと以下、 1・ダークリーダーオフ http://kazan.bakufu.org/DARK_READER_OFF.PNG 2・ダークリーダーオン http://kazan.bakufu.org/DARK_READER_ON.PNG 3・ダークリーダーオン　コントラスト+20（＃０００の「画像」をのっけた） http://kazan.bakufu.org/DARK_READER_ON_contrast+20.PNG 4・ダークリーダーオン　コントラスト+50 http://kazan.bakufu.org/DARK_READER_ON_contrast+50.PNG オフで表示されてたgreen boxがオンでは消えている。また、デザイン上の問題（というほどでもないかもしれないが）として、bodyの背景色？が、ダークリーダーのコントラストの増減で黒に近づいたりグレーに近づいたりします。自分のサイトはbody＃000にしてその上にclass wrapを敷いてそこにサイトの背景画像置いてるので、背景画像の外は＃000になってくれれば背景画像とその外側と色が合うのですが、コントラストをMAX値の+50にしないと現状＃000にならず、少しグレーぽくになります。「＃000の画像」部分はダークリーダーのコントラストによって色が白っぽくなったりしないです。その画像の周囲は＃000のCSS（画像でない）だと、コントラスト等のダークモード設定に依り若干ホワイトが入ってグレーぽくなったりします。ダークリーダーオンにすると本来のデザインを損なわれるのはどうしようもないのかもしれないです。白基調のサイトはどうやってダークリーダーに対応するんでしょうか。レスポンシブ対応のようにダークリーダー用の追加CSSとか書くのか、どうするんでしょう。 z-indexについては、使わない方がいいみたいですね。DTPと違ってWEBコーダーさんは本当に大変だと思います。次から次へと変化に対応しなきゃならないですね。