Css 如何在React.sj中将一个SVG动态定位到另一个SVG的顶部？

我正在使用React.js编写一个web应用程序。我已经到了需要控制音符在横条上的位置的地步。我打算有两个按钮（一个用于向上，一个用于向下），并且让条形图和注释成为两个独立的.svg图像文件，我将以某种方式在彼此的顶部绘制它们。这样地：

所以我的问题是： 如何在另一个SVG的顶部绘制SVG并控制其位置（动态位置）？我试过使用

style={{position:'fixed'}}

对于便笺来说，但是格式都搞砸了

编辑：

---

.svg图像文件。

位置：绝对

将为您提供定位

具有相对定位的页面元素可以控制绝对定位子元素

如果您给出注释

位置：绝对

，您将能够相对于父对象将其定位到您想要的任何位置

.parent{
位置：相对位置；
}
.注{
位置：绝对；
/*将便笺放在左上角*/
左：0px；
顶部：0px；
}

有关此技术的更多信息，请参阅

下面是一个使用

s而不是SVG的代码段，请运行它作为示例：

函数moveUp（）{
document.getElementById（“note”）.style.top=“0.5rem”；
}
函数moveDown（）{
document.getElementById（“note”）.style.top=“2.5rem”；
}

.container{
位置：相对位置；
}
.酒吧{
宽度：15雷姆；
身高：4rem；
背景颜色：浅蓝色；
}
.注{
位置：绝对位置；
顶部：1.5雷姆；
左：1rem；
宽度：1em；
高度：1公厘；
边界半径：1em；
背景色：红色；
}

向上的
向下

当你说SVG时，你是指

.SVG

图像文件还是

标记/组件内联？哦，很抱歉，忘了添加它。这是一个.svg图像文件。下次要求您澄清时，请编辑问题，而不是评论。

<div style={{position: 'relative'}}>
   <img src="bar.svg"></img>
   <img src="note.svg" style={{
        position: 'absolute',
        left: x,
        top: y
   }}></img>