HTML Canvas align DIV at bottom right-hand corner - css

Question

I have a Canvas and want to add a Div/Button in the bottom right-hand corner relative to Canvas. My current code looks as follows:
#container {
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer {
width: 40%;
background-color: red;
height: 100%;
}
#button {
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas {
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>
But so far I couldn't manage to find a proper solution for this. It would be great if someone could help me with this.

Answer 1

Is this what you are looking for?
I recommand you checking out this article: CSS Layout - The position Property
#container{
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer{
width: 40%;
background-color: red;
height: 100%;
position:relative;
}
#button{
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas{
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>

Answer 2

I think Temani was right — this puts the button at the bottom right of the canvas, is this not what you wanted?
#container{
margin-top: 5px;
width: 96%;
margin: auto;
background-color: blue;
height: 300px;
}
#viewer{
width: 40%;
background-color: red;
height: 100%;
position: relative;
}
#button{
height: 40px;
width: 40px;
background-color: green;
position: absolute;
bottom: 0;
right: 0;
}
canvas{
border: 3px solid black;
width: 100%;
height: 100%;
}
<div id="container">
<div id="viewer">
<canvas></canvas>
<div id="button" onclick="myFunction();"></div>
</div>
</div>

Answer 3

Like Temani Afif said.
position:relative
on #viewer worked for me.