CSS3转换，分层和诊断

Question

我最近一直在开发一个微网站，它在CSS3中使用了一些较新的3D效果变换。然而，我一直试图通过分层来使它变得有点过于棘手，以至于某些视错觉生效并且引起了无数头痛......

一般情况下，Chrome中存在此问题（但不是Firefox，尚未尝试使用Safari或IE），其中所有内容似乎都在屏幕上“正确”“渲染”，但当我点击链接或突出显示其中一个文本时更“狡猾的分层”区域，我的光标变得瘫痪，我无法获得任何功能。我可以看到一切都很好，它只是有一个看不见的墙，阻止我的光标互动，如果这有助于解释。

如果没有粘贴一英里长的实验代码，是否有人知道可能导致此问题的原因？我最好的猜测是z-index继承在某些时候出错了，但很难诊断...导致我的下一个问题是，是否有人知道任何分层诊断的好策略（这里的工具也很棒） ）！

我当然精通标准的开发者工具/ Firebug ......

谢谢你们！

Answer 1

好的，所以我解决了我的问题并提出了以下策略，以便将来参考诊断分层问题......

1. 检查可能互相干扰的所有元素的谨慎Z-Index值。必要时重新订购它们，看看是否能解决问题。如果没有，继续前进。
2. 检查步骤1中所有元素的谨慎定位。确保在CSS标记中声明它们具有“position：absolute”或“position：relative”。不要依赖继承/默认。绝对宣言是关键。
3. 检查“背面可见性”值。如果你的设置很复杂，很容易忘记它是什么。

遵循这种模式最终是为我做的。我的问题竟然是所有3个问题的组合，但在我按照上述步骤进行之前，他们并不一定向我揭示。