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

Question

This is my code for my canvas and my Navbar and it looks like this:

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

The problem is I want to achieve something like this:

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

I want that I can display my canvas behaves like the background of the website so I can display content over it in this case it is my navbar but I plan to display more stuff below the navbar and the canvas as my background.

What I have tried:

• Using zIndexes to put my canvas one below my navbar but this did not work
• Tried using position absolute and relative on canvas but did not work either

Answer 1

You can use a "layout div" as a background for all the elements you will put over the canvas, just after the canvas, and both the canvas and the layout div should have position absolute and need to be inside another 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 working example