HTML文本框覆盖在画布元素上。

Question

我一直在玩Canvas中的文本，尽管绘制很容易，但交互却不容易。我开始实现键盘按键功能来更新Canvas上的文本，但当我意识到我必须合并剪切、复制、粘贴和撤销功能时，就放弃了。

有没有办法将HTML元素“浮动”在彼此上面？例如，我可以将文本字段浮动在画布的某些部分之上，并禁用边框并将颜色设置为画布颜色吗？

谢谢您

- puk

---

不，CSS浮动用于使元素环绕其他元素。它与将元素“浮动”在其他元素上没有任何关系。您可能正在考虑z-index或绝对定位。 - glomad

是的，克里斯在下面的答案中指出了这一点。谢谢。 - puk

Answer 1

您可以使用CSS的position: absolute属性和z-index: 1，将元素置于画布上方。

编辑：添加一个示例：这里包含"1234"的

浮动在包含"abcd"的

上面（它可以被替换为画布元素）。

<div id="wrapper">
    <div style="position: absolute; left: 10px; top: 10px; width:200px; height:100px; background-color: yellow;">
        abcd
    </div>
    <div style="position: absolute; z-index: 1; left: 50px; top: 20px; width:100px; height:20px; background-color: green;">
        1234
    </div>
</div>

- ChrisJ

---

谢谢。但是，Charlie上面提出使用“CSS Float”的建议怎么样？是更好、更差还是一样？ - puk

我认为浮动元素不会堆叠在一起。您需要使用position: absolute或position: fixed来实现这一点。 - ChrisJ

还有，我该如何动态添加CSS属性？我是这样动态创建字段的：<field=document.createElement('text')>，但我无法理解如何向其中添加CSS属性。 - puk

要改变颜色，如果颜色是元素的唯一CSS属性，可以使用 field.setAttribute("style", "color: white")。或者，可以使用 field.style.color = "white"。 - ChrisJ

@Nathan，我确实在其他地方读到过这个。为了安全起见，我还是会坚持使用“setAttribute”。 - puk

Answer 2

您可以使用“某种方式”不可见的文本控件来控制输入的文本，并在按键时将innerHTML复制到画布上。我正在做类似的工作，复制DOM中存在的文本的计算字体CSS属性等等。z-index的工作非常简单。setFocus（）函数也可以帮助。

- tomasb