html - over ... inside another -

html - <div> over <canvas>... inside another <div> -

i have weird problem i'm not able solve. should seems same other problem have read relation between , , thing. allow me explain this:

first, i've been working code. works should:

<canvas id="canvas" width="1068" height="814" style="position: absolute; top: 0px; left: 0px; border:1px solid #707070; z-index:-15;"> tu browser no soporta canvas </canvas> <div id="contenedorpregunta" style="background-color: transparent; position: absolute; top: 170px; left: 110px; width: 500px; height: 455px; z-index:5;"> (...) </div>

this shows div content expected on canvas, both attached 0,0.

now, instead, need show game centered in webpage, so, thought in this.

<div align="center"> <canvas style="position: relative; (...)"> </canvas> <div id="contenedorpregunta" style=" position: relative;(...)"> </div> </div>

this not working, div on canvas right behind... ¿why? tried inherit positioning too, result same. don't know how attack problem , grateful help give me.

if want center container div in web page horizontally, provide width container element , utilize margin: auto; that's need, if want horizontally vertically centered need utilize position: absolute;

.totally_centered { height: 500px; width: 300px; position: absolute; left: 50%; top: 50%; margin-top: -250px; /* half of container height */ margin-left: -150px; /* half of container width */ }

and still if confused why div went behind, i've no thought why went behind , how, utilize z-index re-arrange stack level of element

html canvas