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:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.