z-index适用于除Safari 7以外的所有现代浏览器

Question

这里有一个CSS专家的问题。 http://www.thedragonheart.com/上角的圆龙和叶子在最新的OS X或iOS上除了Safari（我正在运行7.0.5）之外的所有现代浏览器中加载。什么是交易？

如果我将div.overbg的z-index设置为0（而不是-1），则会显示叶子和龙，但是龙会在标题中覆盖标题，并且会阻止选择正文。我已经尝试在#wrapper，header，header a和header img上添加z-index，但都无济于事。如何在标题和正文文本下方使div.overbg显示在背景图像上？

谢谢！

Answer 1

您可以在Safari 7中通过将z-index设置为正常情况来解决此问题，然后为样式块提供pointer-events:none的附加规则，这仍然允许基础文本/元素正常选择

如果该圆圈或龙上没有任何点击元素，那么一切都会像您期望的那样。

当然，这会破坏对没有完全实现CSS 3的浏览器的支持，但这是我们现在生活的世界。您可以随时回退到该场景的负z-index实现。

编辑：在没有详细介绍CSS的情况下，第二个失败场景的可能罪魁祸首（标题上的z-index没有出现在带有z-index的元素之上）可能是由于标题没有被赋予static以外的定位值。你可以通过在元素上设置CSS规则position:relative;然后给它一个大于样式元素的z-index来给它一些堆叠上下文来解决这个问题。 例如 .dragon{z-index:1;position:absolute;} .circle{z-index:1;position:absolute;} .header{z-index:2;position:relative;}