我正在开发HTML / JS页面。它有2个容器-container1和container2。
在container1中，我有一个订单输入表单。在container2中，还有一些其他文本和图像。在视图中，container1在顶部，container2在其底部。
因此，我正在做的事情是在container1中-成功提交订单输入表单后，它会隐藏该表单，并在该表单的位置显示订单确认消息。下面的代码对我有用：
document.getElementById('form').style.display = 'none'; // hide form
document.getElementById('confirmation_message').style.display = 'block'; //display confirmation message
它隐藏表单并按预期显示确认消息。
但是我面临的问题是-执行上述代码后，container2数据也向上移动并到达container1（恰好在确认消息下方）。
另外，当我放大和缩小页面时，它也会自动在container2上正确设置container2数据。
您能帮我错过什么财产吗？
请检查bookmywatercan.com。我在那里上传了虚拟演示页面。填写表格并提交。谢谢，一团糟会来，然后看到下面的内容上移。请帮忙。我需要在同一位置下面的内容和有组织的形式的container1。
谢谢。
最佳答案
如果我正确地理解了您的问题，如果您希望container2留在同一位置，则需要将visibility值设置为“隐藏”，而不是将display值设置为“无”。
两者之间的区别之一是visibility: hidden;将元素保留在页面布局中，而display: none;将元素视为甚至不存在。
因此，请针对第一行尝试以下操作：
document.getElementById('form').style.visibility = 'hidden'; // hide form