Javascript 如何在React中将内容放在画布上

这是我的画布和导航栏的代码，如下所示：

<DashboardNavbar style={{ zIndex: 2 }} />
  <canvas id="canvas" style={{ background: "#232323", width: "100%", zIndex: 1 }}
></canvas>

<canvas id="canvas" style={{ background: "#232323", width: "100%", zIndex: 1 }}>
<DashboardNavbar style={{ zIndex: 2 }} />
</canvas>

问题是我想实现这样的目标：

<DashboardNavbar style={{ zIndex: 2 }} />
  <canvas id="canvas" style={{ background: "#232323", width: "100%", zIndex: 1 }}
></canvas>

<canvas id="canvas" style={{ background: "#232323", width: "100%", zIndex: 1 }}>
<DashboardNavbar style={{ zIndex: 2 }} />
</canvas>

我想，我可以显示我的画布行为像网站的背景，所以我可以在它上面显示内容在这种情况下，它是我的导航栏，但我计划显示更多的东西下面的导航栏和画布作为我的背景

我尝试过的：

• 使用zindex将画布放在导航栏下方，但这不起作用
• 尝试在画布上使用绝对位置和相对位置，但也不起作用

您可以使用“布局div”作为画布上所有元素的背景，就在画布之后，画布和布局div都应该具有绝对位置，并且需要位于另一个div内：

JS

HTML

<div id="app"></div>