6

Web ページで Z インデックスを処理するための適切な組織戦略は何ですか?

エラー メッセージ、GIF の読み込み、モーダル ボックスなどのために多くのレイヤーを持つシングル ページ アプリを開発しています。

さまざまな要素の z インデックスを整理する方法について、一般的に受け入れられているアプローチはありますか? 私はグーグルとSOを検索しましたが、十分に一般的と思われるものは見たことがありません.

私は自分のプロジェクトで SASS を使用しているので、ベースの z-index に基づいて簡単に加算を行うことができますが、一般的な CSS 戦略の方がさらに優れています。

4

1 に答える 1

2

私は通常、トップレベルの要素に大きな z-index を指定することを好みます。私が見つけた最善のアプローチは、

  • どの要素が他の要素の上になければならないかを決定する

  • SASS を使用しているため、さまざまな z-index レベルに対していくつかの変数を指定できます。

    .tierBottom { position:[必要なものは何でも]; Z インデックス: 1; }

    .tierMiddle { position:[必要なものは何でも]; Z インデックス: 100; }

    .tierTop{ position:[必要なものは何でも]; Z インデックス: 1000; }

  • 他の何人かが述べているように、ほとんどのコンテナー/ラッパーの z-index について心配する必要はありません。コンテンツが一番上に表示されるなどの問題が発生した場合は、低層の z-index クラスを問題の要素に追加すると、すべてがうまくいくはずです。

これについてはさまざまな意見があり、一部の人にとってはベストプラクティスではないかもしれませんが、これは過去に私にとってうまくいったことです. それが役に立てば幸い！

于 2012-11-27T19:01:41.930 に答える