CSS3變換，分層和診斷

Question

我最近開發了一個微站點，它使用了CSS3中一些較新的3D效果變換。然而，我一直試圖讓分層太棘手一些，以便某些視錯覺生效，並且它已經成爲許多令人頭疼的原因...

一般來說，Chrome中存在這個問題（但不包括Firefox，還沒有嘗試Safari或IE），其中一切似乎都在屏幕上「適當渲染」，但是當我點擊一個鏈接或突出顯示某個更「棘手層次」區域中的某些文本時，我的光標變得柔軟，我無法獲得任何功能。我可以看到一切都很好，只是有一個無形的牆阻止我的光標互動，如果這有助於解釋。

沒有粘貼一英里長的實驗性代碼片段，沒有人知道他們的頭頂是什麼可能導致此問題？我最好的猜測是z-index繼承在某些時候已經出錯，但很難診斷......導致我的下一個問題，即是否有人知道任何分層診斷的好策略（工具在這裏也是很棒的）！

我當然非常精通的標準開發工具/ Firebug的...

謝謝你們！

Answer 1

好了，所以我解決我的問題，並與下面的策略診斷分層問題備查想出了......所有的元素，可能彼此干擾

1. 入住謹慎Z-指數值。如有必要，重新排列它們，看看是否能解決問題。如果沒有，繼續前進。
2. 檢查來自步驟1的所有元素的謹慎定位。確保它們被聲明爲在CSS標記中具有「position：absolute」或「position：relative」。不依賴遺傳/默認。絕對的聲明是關鍵。
3. 檢查您的「backface-visibility」值。如果你的設置很複雜，很容易失去記錄。

遵循這種模式是最終爲我做的。我的問題結果是所有3個組合，但直到我按照上述步驟操作之前，他們不一定向我展示自己。