HTML Canvas在右下角对齐DIV

时间:2019-04-08 20:48:08

标签: css position css-position

我有一个Canvas,想在相对于Canvas的右下角添加一个Div / Button。我当前的代码如下:

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

但是到目前为止,我无法设法找到合适的解决方案。如果有人可以帮助我,那就太好了。

3 个答案:

答案 0 :(得分:0)

我认为Temani是对的-这会将按钮放在画布的右下角,这不是您想要的吗?

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

答案 1 :(得分:0)

这是您要找的吗?
建议您查看这篇文章: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>

答案 2 :(得分:0)

就像 Temani Afif 所说。

position:relative

#viewer 上为我工作。