Search code examples
cssz-index

About CSS z-index value to a canvas

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>
Solution

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

    For Fix:

    Insert position: absolute; to highscore

    Demo