使用z-index来定位svg前面的内容

Question

我很清楚我不能对svg应用z-index，对于svg, z-index是由元素在文档中出现的顺序定义的。

但是假设我有一个div(不是svg)，我想强制它在svg前面，并且由于其他原因，这个div需要出现在标记的后面，像这样:

<svg>...</svg>
<div style="z-index=9999999; position: relative;">...</div>

(上面的结果是svg仍然在前面)

有没有办法强迫div在前面除了移动它上面的HTML标记?

Answer 1

原来我没有在问题中包含足够的信息…我的实际代码看起来更像这样:

<div style="position: fixed">
  <svg>...</svg>
</div>
<div style="position: fixed">
   <div style="z-index: 9999999; position: relative;">...</div>
</div>

这是位置:固定，是防止z索引div出现在前面的svg -见http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements更多信息:作为Chrome 22，"所有位置:固定的元素现在形成新的堆叠上下文。"-也就是说，z- index是相对的w/在一个位置:固定元素。