About CSS z-index value to a canvas

Question

http://jsfiddle.net/y2q3yLpj/

This is my sample. I set z-index of canvas as 0 and z-index of div as 1 but canvas is still higher than div, but if I set z-index of canvas as -1 it would work well. Could you tell me the reason?

<div id = 'all'>
  <canvas style = "width:100px;height:100px; position: absolute;left: 10%;z-index:-1;background-color: yellow;"></canvas>
        <div id = highscore style="width:100px;height:100px;z-index: 1;background-color: red;">
        </div>
    </div>

Answer 1

z-index Sets the stacking order of positioned elements, So it works only for positioned elements.

For Fix:

Insert position: absolute; to highscore

Demo

Answer 2

z index only works when position is absolute

<div id='all'> 
    <canvas style="width:100px;height:100px; position: absolute;left: 10%;z-index:-1;background-color: yellow;"></canvas> 
    <div id="highscore" style="position: absolute;width:100px;height:100px;z-index: 1;background-color: red;"> </div>
</div>