CSS3変換、レイヤー化、および診断

Question

最近私は、CSS3の新しい3Dエフェクトトランスフォームを使用するマイクロサイトを開発しています。しかし、私はいくつかの錯視が効果を発揮し、多くの頭痛の原因となっているように、レイヤリングを少し複雑にしようとしてきました...

一般的に、すべてが「画面上で適切にレンダリング」されているように見えるSafariやIEはまだ試していませんが、リンクをクリックするか、「トリッキーレイヤー」の領域のテキストを強調表示するとカーソルが鈍くなり、機能を得ることができません。私はすべてがうまくいくのを見ることができます。それが説明に役立つならば、目に見えない壁が私のカーソルの相互作用を妨げているだけです。

実験コードを1マイルも貼り付けずに、誰でも頭の上にこの問題の原因が分かっていることを知っていますか？私の推測では、ある時点でz-index継承がうまくいっていないのですが、診断するのは難しいです...私の次の質問につながるのは、誰かが良い診断戦略を知っているかどうかです。 ）！

私はもちろんのFirebug /標準開発ツールに精通しています...

みんなありがとう！

Answer 1

わかりましたので、私は互いに干渉することができるすべての要素のチェック控えめZ-インデックス値は

1. ...私の問題を解決し、階層化の問題を診断する際に、将来の参照のために、次の戦略を思い付い。必要に応じてそれらを並べ替え、それが問題を解決するかどうか確認してください。そうでない場合は、次に進みます。
2. ステップ1のすべての要素について慎重に配置を確認してください。CSSマークアップに "position：absolute"または "position：relative"のいずれかが指定されていることを確認してください。侵入/既定値には依存しないでください。絶対宣言は鍵です。
3. 「裏面の視認性」の値を確認してください。設定が複雑な場合、何が何であるかを把握するのは簡単です。

このパターンは、最終的に私にとってそれをしました。私の問題は3つすべての組み合わせであることが判明しましたが、私は上記の手順を踏むまで必ず自分自身を私に明らかにするとは限りませんでした。