Другие элементы спускаются, когда отображается скрытый div

Question

Я написал toggler для 2 divs, как показано на рисунке here. Он успешно работает на моем веб-сайте. Однако другие элементы ниже скрытого div идут вниз. Я не хочу, чтобы это произошло. Вот снимок экрана для большей ясности:
before clicking div:

after clicking div:

Вы можете видеть, что fill your information here и or ДИВ идут вниз. Я не хочу, чтобы это произошло. Они должны оставаться там, где они показаны, как показано на снимке экрана before clicking div. Как мне это сделать?

Answer 1

Все, что вам нужно сделать, это добавить следующие строки в CSS: Вот обновление вашего FIDDLE

#hidden{ 
    ... 
    position: absolute; 
    z-index: 1; 
} 

Answer 2

Вы пытались установить CSS property z-index на элементах вашей базовой страницы и/или в «плавающем» меню? Это позволяет вам «складывать» элементы веб-страницы, чтобы некоторые элементы могли «покрывать» или плавать поверх других элементов страницы.

Answer 3

Добавить position: absolute; в #hidden. Позже вы можете управлять своим положением, добавив top и left свойствам в CSS.

Answer 4

DEMO

для "наполнит вашу информацию ..." div дать padding-top:(equal to height of the div that you are toggling)

#hidden { 
    position:absolute; 
    top: (equal to height of your header) 
}