Friday, March 29, 2024
HomeCSScss - Easy methods to place a button relative to an absolute...

css – Easy methods to place a button relative to an absolute positioned component


  • Cannot place the Save and Reset button beneath the canvas.

  • You may took a take a look at the instance beneath. However my canvas has absolute place so I can’t use it as a reference to position button beneath.

HTML

<html>

  <head>
    <meta charset="UTF-8" />
    <hyperlink href="fashion.css" rel="stylesheet" />
    <title>Drawing Canvas</title>
  </head>

  <physique>
    <h1 class="title">Easy Drawing</h1>
    <p class="title">Click on and drag your mouse to attract on the canvas.</p>
    <canvas id="canvas"></canvas>
    <button>Save</button><button>Reset</button>
    <script src="canvas.js"></script>
  </physique>

</html>

CSS

#canvas {
  place: absolute;
  border: 2px stable black;
  prime: 50%;
  left: 50%;
  rework: translate(-50%, -50%)
}

.title {
  text-align: heart;
}

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments