如何在html中使输入字段显示在画布顶部_Html_Html5 Canvas

如何在html中使输入字段显示在画布顶部

html html5-canvas

如何在html中使输入字段显示在画布顶部,html,html5-canvas,Html,Html5 Canvas,我试图在画布上显示一个输入字段，并精确定位输入字段。7年前被问到，但被接受的答案对我来说并不适用一次尝试是： <html> <body> <div style="margin:0px;padding:0px;position:absolute;width:700;height:700;border-style:solid"> <canvas style="width:700px;height:700px;"></c

我试图在画布上显示一个输入字段，并精确定位输入字段。7年前被问到，但被接受的答案对我来说并不适用

一次尝试是：

 <html>
 <body>

     <div style="margin:0px;padding:0px;position:absolute;width:700;height:700;border-style:solid">
     <canvas style="width:700px;height:700px;"></canvas>
     <input type="text" style="position:absolute;width:30;height:30;z-index:2"/></div>

 <html>
 <body>
     <div style="position:relative;width:800px;height:800px">
         <canvas width="800" height="800"></canvas>
         <input type="text" "position:absolute;left:100px;top:300px;width:600px " />
     </div>
 <body>

另一个尝试是：

 <html>
 <body>

     <div style="margin:0px;padding:0px;position:absolute;width:700;height:700;border-style:solid">
     <canvas style="width:700px;height:700px;"></canvas>
     <input type="text" style="position:absolute;width:30;height:30;z-index:2"/></div>

 <html>
 <body>
     <div style="position:relative;width:800px;height:800px">
         <canvas width="800" height="800"></canvas>
         <input type="text" "position:absolute;left:100px;top:300px;width:600px " />
     </div>
 <body>

使用Macintosh上的chrome浏览器，如果这很重要的话。

您的第二次尝试是正确的，您只是缺少输入元素上样式字符串前面的style属性

<html>
 <body>
     <div style="position:relative;width:800px;height:800px">
         <canvas width="800" height="800"></canvas>
         <input type="text" style="position:absolute;left:100px;top:300px;width:600px " />
     </div>
 <body>