下面的数据布局在设置显示时向上移动:无

Question

我正在开发一个HTML/JS页面。它有两个容器- 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的组织形式。

谢谢。

Answer 1

如果我正确理解了您的问题，如果您希望container2保持在同一个位置，则需要将visibility值设置为“隐藏”，而不是将display值设置为“无”。

两者的区别之一是，visibility: hidden;将维护页面布局中的元素，而display: none;将把元素视为根本不存在的元素。

因此，在第一行中，尝试这样做：

document.getElementById('form').style.visibility = 'hidden'; // hide form