这里有一个问题要问CSS专家。圆形的龙和树叶在上角http://www.thedragonheart.com/在所有现代浏览器中加载，除了最新OS X或iOS上的Safari(我运行的是7.0.5(。怎么回事？
如果我将div.overbg的z索引设置为0(而不是-1(，则会出现叶子和dragon，但随后dragon会覆盖标题中的标题，并阻止正文被选中。我试过在#wrapper、header、header a和header a img上增加z索引，但都没有用。如何使div.overbg显示在背景图像上，同时显示在页眉和正文下？
谢谢！
您可以在Safari 7中解决此问题，方法是将z索引设置为正常值，然后为样式块提供pointer-events:none的附加规则，该规则仍然允许正常选择底层文本/元素。
如果圆圈或龙上没有点击元素，一切都会像你期望的那样。
当然，这会破坏对那些没有完全实现CSS3的浏览器的支持，但这就是我们现在生活的世界。对于该场景，您总是可以回到负z索引实现。
编辑：如果不详细介绍CSS，第二个失败场景(标头上的z索引没有出现在具有z索引的元素上方(的罪魁祸首可能是因为标头没有被赋予static以外的定位值。您可以通过在元素上设置CSS规则position:relative;，然后给它一个大于样式元素的z索引，为它提供一些堆叠上下文来解决这个问题。例如.dragon{z-index:1;position:absolute;} .circle{z-index:1;position:absolute;} .header{z-index:2;position:relative;}