Menu
I need help with a simple link site and my canvas wont sit behind my text
I think the problem is specifically with my html
I haven't really done a lot with html5 canvases and this was a botched copy paste job:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>jetbrains.xyz</title>
<link href="main.css" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<canvas id='c'></canvas>
<div class="mhm">
<div class="centered">
<h1>⎳⎳⎳</h1>
</div>
<ul class="bmenu">
<br />
<li>
<a href="http://steamcommunity.com/id/-sera/">sera</a>
</li>
<br />
<li>
<a href="">zonk</a>
</li>
</ul>
</div>
</body>
</html>https://jsfiddle.net/83c7npck/
753
asked Jan 28 '26 20:01
To change the stacking order of HTML elements, you need the z-index CSS property. Think of the z-index as an expression of the element's depth, or Z axis, in relation to other elements in the HTML document. The X and Y axis' express the element's left/right and up/down values.
Z-index allows you to specify a 'stacking order', by assigning a number indicating a 'height' position. The higher the number, the 'closer' to the user that element will stack. So say a bunch of HTML elements each had one of these z-index values:
z-index: 1;
z-index: 999;
z-index: -10;
z-index: 50;
The stacking order, from farthest away to closest, will be:
z-index: -10;
z-index: 1;
z-index: 50;
z-index: 999;
A word of caution
Changing the stacking order means placing elements physically over the top of other elements. This means you are obscuring the user's ability to view and interact with them! Think carefully before placing elements behind others, it is best reserved for visual flair only.
Why it's not working
You haven't applied any CSS to your <canvas> elements, so the stacking order will default to that of the element type. Without CSS intervention, HTML elements will never overlap.
For a canvas element, that means block-level. You can read up on how a canvas element will behave by default and how to control it on the Mozilla Developer Network.
If you want to change the stacking order of your elements, you'd need to apply a few changes to your CSS:
canvas {
position: absolute; // this removes the element from the document flow and allows other elements to float over/under it
z-index:0; // alternately, we can simply make this '-1' to sit behind everything...
width: 100px; // just to make it clearly visible when it's working, very handy!
height:100px;
background-color: red;
}
div.mhm {
position:relative; // z-index only works if a position is set to relative or absolute
background-color: rgba(0,0,238,0.5);
z-index:10; // as long as this value is higher than that of the canvas' z-index, it will appear on top
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
