Can someone help me figure out how to position the p tag "instructions" above my canvas? I need it to be centered, and to have it a little inside the top of the canvas. I cannot use canvas.strokeText for this, it has to be in html.

I have tried using different types and combinations of positions, margins, and z-indices, but everything I try either puts the text underneath the canvas or to the left or it. I need it hovering above the canvas (which is centered in the screen), or at the worst case, centered above the canvas.

canvas {
  border: 2px solid white;
  background-colour: #87ceeb;
  display: block;
  margin: auto;
  width: 600px;
  margin-top: 100px;
}

<div  id="instruct">
  <p  style="text-align: center; top: 0px;" id="instructions"> Instructions </p>
</div>
<div id="canvas"  style="position:absolute;">
</div>

CodePudding user response：

canvas {
  border: 2px solid white;
  background-colour: #87ceeb;
  display: block;
  margin: auto;
  width: 600px;
  margin-top: 100px;
}
positioned {
  background-color: light grey;
   width: 300px;
    border: 5px solid balck;
      padding: 50px;
        margin: 20px;
         aligning: center
 }

<div  id="instruct">
  <p  style="text-align: center; top: 0px;" id="instructions"> Instructions </p>
</div>
<div id="canvas"  style="position:absolute;">
</div>

CodePudding user response：

Figured it out, the canvas was being inserted into the document before document.body.childNodes[0] later in the script. Thanks for those who tried to help!