如何在 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 工作示例