关于 CSS z-index 值到 canvas

Question

这是我的样本。我将 canvas 的 z-index 设置为 0，将 div 的 z-index 设置为 1，但 canvas 仍然高于 div，但如果我将 div 的 z-index 设置为=18=] as -1 它会工作得很好。能告诉我原因吗？

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

修复：

Insert position: absolute; to highscore

Demo

Answer 2

z 索引仅在位置为绝对位置时有效

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

关于 CSS z-index 值到 canvas

About CSS z-index value to a canvas

css

z-index