Javascript 如何将svg对象放置在html元素的顶部？

我正在使用svg对象和一些html div元素， 像这样

.layer2{
位置：绝对位置；
排名：0；
左：180像素；
高度：100vh；
宽度：10%；
显示：块；
背景：rgba（0,0,0,0.6）；
}

.st0{fill:#ED1C24；}

只需给SVG一个

位置：相对值和一个Z索引值，如下所示：


.layer2{
位置：绝对位置；
排名：0；
左：180像素；
高度：100vh；
宽度：5%；
显示：块；
背景：rgba（0,0,0,0.6）；
}
svg#第1层{
位置：相对位置；
z指数：200；
宽度：350px；
}

.st0{fill:#ED1C24；}
圆圈位于矩形的顶部。问题来自SVG：它实际上是一个非常大的透明矩形，中间有一个红色圆圈。但它的位置是正确的，只是左上角不是你期望的位置。