javascript - 需要在右下角的 css div 中定位 html5 Canvas

Question

我正在尝试将使用 HTML5 Canvas 的时钟添加到 div。 canvas 标签有一个 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 的所有属性，而是用父标签包围 canvas 标签并应用相同的属性。运气不好。

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

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

我已经花了太多时间用头敲击键盘、搜索 Google、反复试验等。

如有任何帮助，我们将不胜感激。

如果您需要查看生成 Canvas 标签内容的 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>