将HTML文本框放置在桌面和移动站点的固定位置的图像上

我试图在图片（宝箱）的顶部添加一个文本框，我希望文本框在宝箱上石板的固定位置保持完整。（附图）

它在桌面上看起来很完美，但在移动设备中，文本框比图中的石板稍低。我怎样才能使它在手机上也保持相同的位置？（附图）

---

这是我的密码。请帮忙。蒂亚。（请原谅我的新手错误）

我不确定移动视图的具体用途，但此HTML/CSS是一种更简单的设置方式，您应该能够更轻松地调整它：

let input=document.getElementById（“playerswer24”）；
input.oninput=函数（）{
如果（this.value.length>this.maxLength）{
this.value=this.value.slice（0，this.maxLength）；
}
}

.container{
位置：相对位置；
宽度：75%；
身高：75%；
显示器：flex；
证明内容：中心；
}
#胸膛{
最大宽度：100%
}
#运动员24{
位置：绝对位置；
字母间距：22px；
颜色：白色；
左侧填充：30px；
边界：0px；
最高：37%；
}

我不确定您对mobile view的具体要求，但此HTML/CSS是一种更简单的设置方式，您应该能够更轻松地调整它：

let input=document.getElementById（“playerswer24”）；
input.oninput=函数（）{
如果（this.value.length>this.maxLength）{
this.value=this.value.slice（0，this.maxLength）；
}
}

.container{
位置：相对位置；
宽度：75%；
身高：75%；
显示器：flex；
证明内容：中心；
}
#胸膛{
最大宽度：100%
}
#运动员24{
位置：绝对位置；
字母间距：22px；
颜色：白色；
左侧填充：30px；
边界：0px；
最高：37%；
}

由于

img

元素不能有子元素，我们用

div

将其封装并展开以填充父元素，现在div和

img

具有相同的维度，这意味着我们可以在

div

中对齐输入，并且它也将与

img

对齐

使用百分比值使其随宽度保持动态

*，
*：之前，
*：之后{
保证金：0；
填充：0；
框大小：边框框；
}
div{
边框：1px实心；
位置：相对位置；
/*删除图像下方不需要的空间*/
字号：0；
/*调整右下角的大小*/
调整大小：两者；
溢出：自动；
/*起点*/
宽度：400px；
高度：300px；
}
img{
最大高度：100%；
最大宽度：100%；
最小高度：100%；
最小宽度：100%；
}
输入{
位置：绝对位置；
身高：9%；
宽度：54%；
最高：36%；
左：22%；
边界半径：2px；
边界：无；
/*红色的出现*/
背景色：红色；
字母间距：22px；
颜色：白色；
大纲：无；
文本对齐：居中；
字体大小：16px；
左侧填充：30px；
}

---

由于

img

元素不能有子元素，我们用

div

将其封装并展开以填充父元素，现在div和

img

具有相同的维度，这意味着我们可以在

div

中对齐输入，并且它也将与

img

对齐

使用百分比值使其随宽度保持动态

*，
*：之前，
*：之后{
保证金：0；
填充：0；
框大小：边框框；
}
div{
边框：1px实心；
位置：相对位置；
/*删除图像下方不需要的空间*/
字号：0；
/*调整右下角的大小*/
调整大小：两者；
溢出：自动；
/*起点*/
宽度：400px；
高度：300px；
}
img{
最大高度：100%；
最大宽度：100%；
最小高度：100%；
最小宽度：100%；
}
输入{
位置：绝对位置；
身高：9%；
宽度：54%；
最高：36%；
左：22%；
边界半径：2px；
边界：无；
/*红色的出现*/
背景色：红色；
字母间距：22px；
颜色：白色；
大纲：无；
文本对齐：居中；
字体大小：16px；
左侧填充：30px；
}

您可以包含宝箱图像的完整URL，或者将其上载到imgur并共享该链接吗？当然，这里是链接：您可以包含宝箱图像的完整URL，或者将其上载到imgur并共享该链接吗？当然，这里是链接：

    <img src="img/Shadow_plate2x.png" style="position:relative; width:75%;height:75%"><br>
    <input type="number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
        type = "number"
        maxlength = "5"  id="PlayerAnswer24" align="middle"  name="PlayerAnswerx" required="required" style="background-color: transparent;
position:absolute;
top: 31%;
left: 50%; 
transform: translate(-50%, -50%);
letter-spacing: 22px; 
color:white; 
padding-left:30px; border:0px" placeholder="XXXXX"  autocomplete="off"/>