HTML5：如何将固定文本输入置于居中 canvas 之上？

Question

我有一个包含游戏的 canvas。我想在游戏中的特定位置放置一个 html 文本输入字段。这被证明是困难的，因为我希望 canvas 在 window 中自动水平居中，并且当 window 大小改变时它与文本输入不同步。

我应该给这两个元素什么样式设置才能使文本字段保持在 canvas 上的相同位置？

Answer 1

提供您的 canvas 元素 position:relative 并提供您的消息元素 position:absolute。然后使用 top & left 定位消息。

canvas {
  border: 1px solid black;
  height: 300px;
  width: 300px;
  position:relative;
}


#message {
  position:absolute;
  top:150px;
  left:100px;
}

https://jsfiddle.net/ebkpcsvg/1/

Answer 2

我找到了一个有效的解决方案：http://jsfiddle.net/FV2NL/

<div id="container">
    <canvas id="canvas" width=800 height=600></canvas>
        <div id="menu">
            <button id="button1" type="button">Start</button>
            <button id="button2" type="button">Options</button>
            <button id="button3" type="button">High Scores</button>
        </div>
</div>
</body>

所有内容都必须在 div 组内，该组具有相对定位并以 margin: 0 auto; 为中心。 canvas 应该有绝对定位和 top: 0;左：0；。文本输入是绝对的，并放在相对的 div.

中

这是来自此处的另一个 Whosebug 页面：

Buttons centered over canvas

HTML5：如何将固定文本输入置于居中 canvas 之上？

HTML5: How do you place a fixed Text Input over a centering canvas?

html

javascript

canvas

textinput

centering