向下滑动具有较高z-index值的元素不会压下页脚

Question

我正在填充一个用HTML创建的框，它在卡片的底部有一个向下滑动的面板。点击“更多”按钮时它会向下滑动。向下滑动部分的z-index值比页面中的其他元素高。

当最后一个框的面板向下滑动时，它会超出页脚而不会向下推动页脚。

页脚的css

.footer {
  font-size:14px;
  text-align: center;
  width: 100%;
  background-color: #000000;
  color: #909090;

  line-height: 25px;
  position: relative; /* sticky footer */
  margin-top: -26px; /* sticky footer */
  height: 26px; /* sticky footer */
  top:50px;
  margin-bottom: 0px;
  clear: both; /* sticky footer */
}

下滑面板的CSS

.detailPanelClass{
  color:#4D4D4D;
  margin-top: 15px;
  left: -1px;
  right:-1px;
  border-radius:0;
  display:none;
  z-index:100;
  position:absolute;
  font-size: 14px;
  line-height: 1em;
  background-color:#FFFFFF;
  border: 1px solid #D0D0D0;
  border-top:0;
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.35);

}

我想在面板向下滑动时将页脚向下推。我在Google和stackoverflowe中搜索了很多内容。但我找不到答案。有办法吗？