需要在右下角的css div中定位html5画布答案

【问题标题】：Need to position html5 canvas within css div at bottom right需要在右下角的css div中定位html5画布
【发布时间】：2017-09-28 14:37:20
【问题描述】：

我正在尝试将使用 HTML5 画布的时钟添加到 div。画布标签有一个 ID，所以我尝试将 CSS 标签位置、底部、右侧应用到 id。我似乎无法让 canvas 标签的内容显示在父 DIV 的右下角。

HTML

<div id="Header">
<canvas id="clock"></canvas>
</div>

CSS

#Header {
    background-image: url(images/building.png);
    background-color: #FFFFFF;
    width: 780px;
    height: 399px;
    margin: 0;
    padding: 0px 0 0 0;
    position: relative;
}

#clock {
    width: 780px;
    height: 399px;
    bottom: 1px;
    right: 1px;
    position: absolute;
}

我尝试了各种变化，但没有运气。

我还尝试删除 id=clock 的所有属性，而是用父标签封闭画布标签并应用相同的属性。没有运气。

当我创建一个具有相同 CSS 属性的 div 标签并移除 canvas 标签并仅替换为文本时，文本会根据需要显示在父 div 的右下角。

因此，似乎 js 代码中提供 canvas 标签的东西是导致定位问题的原因。不确定。

在这方面工作了太多小时，我的头在键盘上敲打，在谷歌上搜索，反复试验等等。

任何帮助将不胜感激。

如果您需要查看生成 canvas 标签内容的 JS 代码，请告诉我。除非需要，否则我不想立即将其包含在内，因为我不想让帖子进一步混乱。

谢谢！

【问题讨论】：

1) 如果画布与页眉大小相同，则将其放在左上角或右下角没有区别。 2）您必须将画布尺寸定义为 HTML 属性，或使用 JS； CSS 尺寸将与画布一起缩放内容。
那些宽度，高度属性错误地进入了那里。让我把它们拉出来再看看。我相信画布的大小已经在 JS 文件中定义了。在宽度和高度在那里之前我没有任何运气，但让我再试一次。谢谢。会回来报告的。
谢谢！在查看了您的回复后，我深入研究了 .js 文件，发现画布的大小是浏览器窗口的大小，这当然不允许我移动它。无法在与盒子大小相同的盒子中移动项目 :-) 如何在此处选择您的回复作为“答案”？
顺便说一句，这是我改变的：
没关系，我发布了评论而不是答案，因为我不确定问题出在哪里。

标签： javascript css html html5-canvas

【解决方案1】：

使用text-align 和padding-top。例如：

#Header {
    border: 3px dotted red;
    text-align: right;
    padding-top: 200px;
}

#clock {
   border: 1px solid black  
}

<div id="Header">
<canvas id="clock"></canvas>
</div>

【讨论】：