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

Question

这是我的画布和导航栏的代码，它看起来像这样：

<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>

我希望我的画布可以像网站的背景一样显示，这样我就可以在它上面显示内容，在这种情况下它是我的导航栏，但我计划在导航栏和画布下方显示更多内容作为我的背景。

我尝试过的：

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

Answer 1

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

JS

const DashboardNavbar = () => (
  <div className="navbar">Hello</div>
)
const HelloWorld = () => (
  <div className="main">
      <canvas id="canvas" style={{ background: "#232323", width: "100%", height:100}} />
      <div className="layout">
         <DashboardNavbar />  
      </div>
  </div>
)
ReactDOM.render(<HelloWorld />, document.getElementById('app'))

CSS

.layout{
  position:absolute;
  width:100%;
  height:100px;
}
#canvas{
  position: absolute;
}
.navbar{
  color: white;
  background-color: blue;
  padding:2px;
  margin:20px;
}

HTML

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

Codepen 工作示例