web-dev-qa-db-fra.com

Comment superposer une div sur une toile CSS

J'essaie de placer une div sur une toile en HTML5 (comme une sorte de HUD). J'utilise z-index, ça ne marche pas. Comment puis-je y parvenir en utilisant n'importe quel CSS?

    .HUD {
        z-index:100;
    }

    canvas {
        z-index:1;
    }
htmlcsshtml5html5-canvas
6
user3105120

Essaye ça:

#container {
  position: relative;
}
#container canvas, #overlay {
  position: absolute;
}
canvas {
  border: 1px solid black;
}
<div id="container">
  <canvas></canvas>
  <div id="overlay">This div is over the canvas</div>
</div>

Nous encapsulons les canvas et div dans un élément conteneur, qui est position: relative. Ensuite, canvas et div sont définis sur position: absolute.

19
soktinpk

essayez quelque chose comme ça

<div class="container_div" style="position:relative;">
    <div class="hover_div" style="position:absolute; width:25px !important; display:block;z-index:9999">                            
        <img class="some_class" src="/settings_icon.png" style="height: 20px; display: block;">
    </div>
<canvas width="180" height="270" style="width: 180px; height: 270px;"></canvas>
</div>
1
Aameer