Коробки появляются под нижним колонтитулом. Требование выше

Question

У меня есть несколько контейнеров-контейнеров, которые расширяются при нажатии кнопки «рецепт рецепта», но все 3 в нижней части будут скрыты под контейнером нижнего колонтитула, я не уверен, какой элемент изменить, чтобы отобразить расширенные контейнеры выше, а не под.

жить URL: http://bit.ly/1hQuzRI

Я прикрепил CSS элементов, которые появляются под сноской, и некоторые из футера тоже. Я могу вставить html, но есть нагрузки, которые в итоге появятся. возможно, лучше всего просто посмотреть прямо на сайте.

.box2-container-collapsed { 
padding: 10px; 
width: 270px; 
height: auto; 
background-color: #F5F2E9; 
display: block; 
float: left; 
margin-right: 20px; 
margin-top: 20px; 
position: relative; 
} 


.box2-content { 
margin-left: 0px; 
font-size: 0.9em; 
min-height: 200px; 
display: none; 
} 

#footer { 
background-color: #F3F3F3; 
padding-top: 10px; 
padding-bottom: 0px; 
bottom: 0; 
position: relative; 
margin: 0 auto; 
width: 100%; 
} 

Answer 1

Установите индекс z в нижнем колонтитуле на отрицательное число. Также попробуйте установить z-index для div, который расширяется до большего числа.

Редактировать: Ваш div с классом = "content-container" имеет переполнение: скрыто. Я удалил это в своих инструментах Chrome-Dev, после чего расширился div. Боковое примечание. Трудно понять, где заканчивается рецепт, и нижний колонтитул начинается. Возможно, вы захотите также установить световую границу вокруг рецепта div.