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

Question

我正在尝试将使用HTML5画布的时钟添加到div。画布标签有一个 ID，所以我尝试将 CSS 标签的位置、底部、右侧应用于 id。我似乎无法让画布标签的内容显示在父 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 标签并删除画布标签并仅替换为文本时，文本会根据需要显示在父div 的右下角。

因此，似乎 js 代码中提供画布标签的某些内容是导致定位问题的原因。不确定。

已经有太多时间把我的头撞在键盘上，搜索谷歌，反复试验等。

任何帮助将不胜感激。

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

谢谢！

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