html - 无法在另一个元素之上获取 HTML 元素

Question

编辑以解释链接问题之间的区别:

我遇到的问题是不同的:1.我想覆盖的元素是不相关的2. 这些是 svg 元素

有人可以针对这些情况提出可行的解决方案吗？

---

我基本上想将所有文本元素放在路径元素之上。看来我正在为此遵循标准规则(使用 z-index 集定位的元素)，但它不起作用。这是为什么？

text {
  position: fixed;
  z-index: 2
}
path {
  position: relative;
  z-index: 1
}

<svg width="1191" height="751"><g id="holdDonut" transform="translate(595.5,375.5)">
  <g class="arc">
    <path d="M2.238042025441788e-14,-365.5A365.5,365.5,0,0,1,13.18655527399621,-365.2620494384899L6.593277636998105,-182.63102471924495A182.75,182.75,0,0,0,1.119021012720894e-14,-182.75Z" style="fill: rgb(152, 171, 197);"></path>
    <text transform="translate(4.9457632502712405,-274.0803806383672)" dy=".35em">28</text></g>
  <g class="arc">
    <path d="M13.18655527399621,-365.2620494384899A365.5,365.5,0,1,1,-6.714126076325364e-14,-365.5L-3.357063038162682e-14,-182.75A182.75,182.75,0,1,0,6.593277636998105,-182.63102471924495Z" style="fill: rgb(138, 137, 166);">
  </path>
  <text transform="translate(-4.9457632502711455,274.0803806383672)" dy=".35em">3 086</text>
  </g>
  </g>
  

https://codepen.io/anon/pen/jLGGpz

Answer 1

尝试将上面的text元素移动到path元素