私はゲームを含むキャンバスを持っています。私は、ゲームの特定の場所にhtmlテキスト入力フィールドを配置したい。これは、キャンバスが自動的にウィンドウの中央に配置され、ウィンドウサイズが変更されたときにテキスト入力と非同期にしたいので、難しいことです。HTML5：固定テキスト入力をセンタリングキャンバスに配置するにはどうすればよいですか？
テキストフィールドがキャンバス上の同じ場所に残るようにするには、両方の要素をどのようなスタイル設定にする必要がありますか？
キャンバスの要素の位置を指定します。relative：メッセージ要素の位置：absoluteを指定します。次に、上部に&を使用して、メッセージを配置します。
canvas {
border: 1px solid black;
height: 300px;
width: 300px;
position:relative;
}
#message {
position:absolute;
top:150px;
left:100px;
}
このソリューションでは、キャンバスは中央に配置されていません。ページ内のキャンバスの中心を水平にしますが、その上にメッセージを保持するにはどうすればよいですか？ – Eagleheart
contains divを追加し、cssプロパティmargin：0 autoを使用して、キャンバスを水平に中央に配置することができます。ここでは、メッセージをdivに絶対的に配置するようにフィーリングを変更しました https://jsfiddle.net/ebkpcsvg/2/ – derp
これはほとんど機能しますが、水平スクロールバーが表示されたときに、テキスト入力がターゲットから再びスライドします。 – Eagleheart
Iが機能するソリューションが見つかりました：すべてが相対位置を有しており、余裕をもってセンタリングされるDIVグループ内でなければならない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>
：0自動;.キャンバスは、絶対的な位置付けとtop：0;左：0 ;.テキスト入力は絶対的なもので、相対divの内部に入れられます。
これは、ここでは別のStackOverflowのページからです：
あなたは私たちがして仕事ができるの例のいくつかの並べ替えをjsfiddleを提供することはできますか？ –
divにキャンバスとinput-type-textをラップします。ラッパーは 'position：relative'でキャンバス＆入力は' position：absolute'です。 – markE
位置が絶対的な場合、キャンバスや入力を中央に取得する方法がわかりません。 – Eagleheart