CSS3 转换、分层和诊断答案

【问题标题】：CSS3 Transforms, Layering, and DiagnosticsCSS3 转换、分层和诊断
【发布时间】：2012-05-14 07:33:46
【问题描述】：

我最近一直在开发一个使用 CSS3 中一些较新的 3D 效果变换的微型网站。但是，我一直在尝试让分层变得有点棘手，以便某些视错觉生效，这导致了许多头痛......

一般来说，Chrome（但不是 Firefox，尚未尝试过 Safari 或 IE）中存在这个问题，其中所有内容似乎都在屏幕上适当地“呈现”，但是当我点击链接或突出显示其中一个中的某些文本时越是“棘手的分层”区域，我的光标就会变软，我无法获得任何功能。我可以看到一切都很好，只是有一堵看不见的墙阻止了我的光标交互，如果这有助于解释的话。

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

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

谢谢大家！

【问题讨论】：

标签： google-chrome css css-transitions

【解决方案1】：

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

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

遵循这种模式最终为我做到了。结果证明我的问题是所有 3 个问题的组合，但在我按照上述步骤操作之前，它们并不一定会向我展示自己。

【讨论】：

如果有人有精巧的工具甚至更好的策略，我会等待一段时间，然后再接受我自己的答案。希望看到其他一些想法。