无法将 HTML 元素置于另一个元素之上



编辑以解释链接问题之间的差异:

我遇到的问题是不同的: 1.我要叠加的元素不相关 2. 这些是 svg 元素

有人可以为这些情况提出可行的解决方案吗?


我基本上想将所有文本元素放在路径元素之上。似乎我正在为此遵循标准规则(使用 z 索引集定位的元素(,但它不起作用。为什么?

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

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

相关内容

最新更新