以下は、表示設定上でデータレイアウトが上がっています：なし

Question

私はHTML/JSページを開発しています。コンテナ1とコンテナ2の2つのコンテナがあります。

container1には、Order Entry Formがあります。コンテナ2には、他のテキストや画像があります。ビューでは、container1は上にあり、container2は下にあります。

私が行っていることは、コンテナ1にあります - 注文入力フォームを正常に提出すると、フォームを非表示にし、フォームのインプレースで注文確認メッセージを表示します。以下のコードは私にとってうまくいきます：

document.getElementById('form').style.display = 'none'; // hide form 
document.getElementById('confirmation_message').style.display = 'block'; //display confirmation message 

期待したとおりにフォームを隠して確認メッセージを表示しています。

問題私は直面しています - 上記のコードの実行後、コンテナ2のデータも上方に移動し、コンテナ1（確認メッセージのすぐ下）に来ます。 また、ページを拡大/縮小するときにコンテナ2のデータを自動的にコンテナ2に設定することもできます。 私が見逃した不動産を手伝ってください。

bookmywatercan.comをご確認ください。そこにダミーデモページをアップロードしました。フォームに記入して提出してください。あなたが混乱していただきありがとうございます。助けてください。私は同じ場所とコンテナ1の下のコンテンツを組織化された形で必要とします。

ありがとうございます。

Answer 1

コンテナ2を同じ場所に置いておきたい場合は、displayの値を「none」ではなく「visibility」の値を「hidden」に設定する必要があります。

2つの違いの1つは、visibility: hidden;は、ページのレイアウト内で要素の場所を維持しますが、display: none;は要素が存在しないように扱うことです。

だから、最初の行のために、代わりにこれを試してみてください。

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