Html 显示在页脚下方的框。以上要求

我有一些div容器，当点击“查看配方”按钮时会展开，但底部的所有3个容器都会隐藏在页脚容器下面，我不确定要修改哪个元素，使展开的容器显示在上方而不是下方

实时网址：

我已经附上了页脚下面出现的元素的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%;
}

---

将页脚中的z索引设置为负数。还可以尝试为扩展到更高数字的div设置z索引

编辑：

---

带有class=“content container”的div具有溢出：隐藏。我在我的Chrome开发工具中删除了它，之后扩展的div就可以看到了。旁注：很难看到食谱的结尾和页脚的开始。您可能还想在recipe div周围加上一个浅色边框。

也尝试了一下，但仍然没有任何效果。您的内容容器上有溢出：隐藏，扩展div扩展到了它之外。找到了它，并使用Chrome开发工具进行了测试，以确保它确实是问题所在。移除溢出：从类内容容器中隐藏。