Question

我有一些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%;
}

Answer 1

将页脚中的z-index设置为负数。另外，尝试为扩展为更高数字的div设置z-index。

修改：你的class =“content-container”的div有溢出：隐藏。我在我的Chrome-Dev工具中移除了它，之后可以看到扩展的div。旁注：很难看到配方结束和页脚开始的位置。您可能还想在配方div周围放置一个浅色边框。

出现在页脚下方的框。要求以上

1 个答案: