多くのZ-インデックスパラメータを扱う最良の方法は何ですか？

Question

私のプロジェクトは非常に混乱しています。私は非常に多くのZ-インデックスを使用しているからです。 今、私はいくつかのクラスが隠れている理由を理解できず、解決する方法がありません。これらの問題を解決するために私ができることはありますか？助言がありますか？

Answer 1

Z-インデックスを一度に1つずつ変更してください。一般的に、人々は大きい数字を使う傾向があるので、どちらがどれであるかを覚えています。たとえば、zインデックスを毎回100ずつ増やすか、毎回100または1000まで減らします。

あなたの質問はおそらく下落してしまいます。ごめんなさい。

Answer 2

Sass/SCSS（またはLessまたはStylus）のようなプリプロセッサを使用している場合は、変数を使用してz-インデックスを追跡できます。たとえば、あなたは次のようなことをすることができます：

$z: (
    base: 1, 
    menus: 10, 
    modals: 100 
) 

.modal { z-index: map-get($z, modals); } 
.some-other-modal-thing { z-index: map-get($z, modals); } 

これは今後役立ちます。今のところ、あなたは手動でそれをきれいにする必要があります。選択したテキストエディタで検索+置換すると、参照を追跡して更新するのに役立ちます。 z-indexのインスタンスを1つずつ調べ、一度に1つずつ削除して何が壊れているかを確認すると便利です。 （何も壊れなければ、ルールを抹消して次のインスタンスに移ります！）

Answer 3

物を区画化します。

ハイレベルのレイヤーを高レベルのコンポーネントで作成します。私。メニューバー、サイドバー、およびメインセクションがある場合は、3つのレイヤーをレイヤーするだけです。その後、これらの内部に何があるのか​​心配してください。

個々のものをページ上の他のすべてのものと1つ1つレイヤーする場合は間違っているとします。

言い換えれば、常識を使い、人生の他のすべての面で人々が何をするのかを考えてみましょう。一つの長いリストを作成するのではなく、扱いやすく理解しやすいグループにしてください。

技術的には、相対的および絶対的な位置決めによって、新しいz-索引付けコンテキストが作成されます。固定の位置付けはブラウザによっても異なりますが、Firefoxではこれをいくつかのバージョンで扱うように変更しています。私は間違っていないとChromeが違うように扱いますが、誰かがそれを確認する必要があります。