Im trying to get my canvas to cover my header and navigation panel but it's just stacking on top even though it's got a greater Z-index. Is I use position absolute, it goes over the elements I want but it does not align properly. The canvas will start maybe at the halfway point which I don't understand. Shouldn't it inherit the positioning/alignment from the topWrapper rules?HTML\[code\]<div id="topWrapper"> <canvas id="canvas" width="850px" height="194px"></canvas> <a href="http://stackoverflow.com/questions/15822033/index.html"> <header id="top_header"></header> </a> <nav id="topnav"> <ul> <li><a href="http://stackoverflow.com/questions/15822033/index.html">Home</a></li> <li><a href="http://stackoverflow.com/questions/15822033/about.html">About</a></li> <li><a href="http://stackoverflow.com/questions/15822033/video.html">Trailers</a></li> <li id='adminPage'><a href="http://stackoverflow.com/questions/15822033/admin.html">Admin</a></li> </ul> </nav> </div> \[/code\]CSS: \[code\]#topWrapper { background-color:#0d0d0d; text-align:center; position:absolute; z-index:9999; width:100%; max-width: 850px; margin: 0 auto; left:0px; right:0px; float:clear; background-image: url('images/headfoot/bg5.jpg'); }#top_header{ width: auto; height: 120px; border-bottom: 1px solid yellow; margin: 0px; padding: 2px 0px; cursor
ointer; background: url('images/banner.png') center no-repeat; background-size: contain;}#topnav{ border-bottom: 1px solid yellow; width: 100%;}#canvas{ background: green;}\[/code\]I tried using Absolute positioning on the canvas element which places itself over like I need but then the alignment doesn't work:
ointer; background: url('images/banner.png') center no-repeat; background-size: contain;}#topnav{ border-bottom: 1px solid yellow; width: 100%;}#canvas{ background: green;}\[/code\]I tried using Absolute positioning on the canvas element which places itself over like I need but then the alignment doesn't work: