Javascript div高度变化时背景图像的静态位置

此

具有背景图像

在这个容器中我有一个表单

当我单击“提交表单”时，我会显示一个消息框以指示成功，此消息框会更改容器的高度，因此背景图像会移动，如何防止背景图像出现时移动

这是html：

<div class="container">

<form ................ </form>
<div class="successfulmessagebox">......</div>
</div>

---

在CSS中使用这个类

.successfulmessagebox
{
position:absolute;
}

---

一个基本的例子会让你启动

$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（）{
$（'.success'）.show（）；
});
});
.container{
边框：1px纯红；
位置：相对位置；
高度：150像素；
宽度：240px；背景：url(https://www.gravatar.com/avatar/83f035c0ea91a761fbfcd67482f9b848?s=32&d=identicon&r=PG&f=1);
背景尺寸：封面；
}
输入{边距：5px 0px；}
.成功{
显示：无；
位置：绝对；/*==位置：绝对=======*/
背景：绿色；
颜色：#fff；
填充：10px；
底部：10px；
/*放置在容器内的任何位置*/
左：10px；
/*放置在容器内的任何位置*/
}

成功
背景位置
？您可以使用
位置：绝对位置
获取成功消息并对其进行定位。！这不会影响
容器
。
.successfulmessagebox
{
position:absolute;
}