Javascript 将Div的内容放在顶部

我想创建一个包含整数值的输入。如果单击了插入符号向上按钮，输入值将增加1；如果单击了插入符号向下按钮，输入值将减少1

我的问题是

向下插入符号的样式错误。我想将
下插入符号
放在蓝色矩形的顶部

当前，
向下插入符号位于div的底部。下面是当前输出的图像


我尝试了一些方法，比如flex、绝对位置等，但这些是红色div和蓝色div的重叠区域


//添加javascript函数以在单击插入符号时更改输入值
//获取输入元素
var输入=document.getElementById（“提醒编号”）；
//函数修改输入的值
函数addValue（value）{
input.value=parseInt（input.value）+parseInt（value）；
}
/*设置qty div的样式，以便在同一行中显示输入和按钮div*/
数量{
宽度：250px；
高度：50px；
}
/*将包装器div添加到轻松设置元素样式中*/
#提醒\u编号\u包装{
宽度：230px；
浮动：左；
身高：100%；
}
/*调整输入的高度以适合div父对象，这样更容易看到*/
#提醒\u编号\u包装输入{
宽度：220px；
身高：100%；
}
/*设置按钮div的样式以在同一行中显示输入和插入符号*/
#钮扣{
宽度：20px；
身高：100%；
浮动：对；
显示：块；
}
/*设置动作按钮的样式以适合div的高度*/
.行动{
高度：25px；
}
#加上提醒{
字体：33px/1 Arial，无衬线；
边框：1px纯红；
光标：指针；
}
#减去{
字体：33px/1 Arial，无衬线；
边框：1px纯蓝色；
光标：指针；
}
对于数字，还有另一种解决方案，它将
输入
与类型
数字


您的描述有点不清楚，如果我理解正确，请查看下面的示例，看看它是否是您想要的


*{
框大小：边框框；
}
数量{
位置：相对位置；
}
.新的{
位置：绝对位置；
右：0；
排名：0；
}
#加你提醒，减你提醒{
保证金：0；
高度：24px；
宽度：22px；
字体：33px/1 Arial，无衬线；
光标：指针；
}
#加上提醒{
边框：1px纯蓝色；
}
#减去{
边框：1px纯红；
}
输入{
高度：48px；
字体大小：1.5rem；
边际：0px；
填充：0px；
线高：1.5雷姆；
宽度：100%；
}

您可以创建一个JSFIDLE或其他选项吗？您好，我已经将您的代码转换为一个代码片段，以便我们可以看到它的实际运行情况-很遗憾，您的代码片段与您的图像不匹配。请提供正确和完整的css生成截图，以便我们可以帮助修改它。请参阅。@ArpitBansal最好推荐一个代码段而不是jsfiddle-jsfiddle是第三方站点，将来可能会停止工作。如果问题的代码太多（请参阅mcve的最小部分），那么请确定。@ArpitBansal，我不知道如何创建JSFIDLE。这不是JavaScript的问题。我只想将插入符号
放在
蓝边div
的顶部。如果您不清楚，请问我一个问题。@freedomn-m，我不知道如何创建JSFIDLE。这不是JavaScript的问题。我只想将
下插入符号
放在
蓝边div的顶部
。如果你不清楚，请问我一个问题。我想看到这样的景色。谢谢，谢谢你。您稍后的解决方案存在问题。请查收。谢谢。@abu你发现了什么问题？我运行我的代码片段，没有看到任何奇怪的东西！请注意，我打算在
减号提醒
分区中使用
fa-caret-up
图标。请查看图像并单击图像中显示的
fa-caret-up
。它是在降低价值，而不是增加价值。谢谢，谢谢你指出。因此，我更新了第二种方法，删除了字体awesome的用法。我用纯CSS画了两个三角形。