Затухание в поле ввода, смещение остальной части сайта

Question

Я делаю сайт, и основная часть сайта - это холст, на котором я через javascript и jquery сделал приложение. Для получения ввода от пользователя, мне посоветовали добавить некоторые поля ввода, расположенные с использованием абсолютного позиционирования. Это работает, но когда они исчезают, они несколько вытесняют остальную часть сайта. Что я могу сделать, чтобы это не вытеснило остальную часть сайта? Также не забудьте сообщить мне о других способах получения информации от пользователя.

Здесь - ссылка на размещенную версию сайта.

Answer 1

Поскольку мои комментарии превращаются в ответ, я также могу добавить ответ:

Другой способ получения пользовательского ввода - prompt ()

Чтобы исправить ваши проблемы с абсолютным позиционированием, оберните ваш контент в div обертки, например:

<div style="width: 500px; margin: 0 auto;position:relative;">
  <!--content here-->
</div>

Затем убедитесь, что каждый из ваших входов имеет свою абсолютную позицию.

ПРИМЕЧАНИЕ. Используемые вами абсолютные значения будут больше относиться не к документу, а к новой оболочке, поэтому top: 0; left: 0 поместит элемент в верхнем левом углу оболочки