css - 为什么容器内的 div 与页脚重叠？

Question

我有一个看似简单的问题，但我无法解决它。 今天早上，我的网站开始显示表格容器与页脚的重叠。

在 GIT 中，我没有看到任何可能导致上次合并的差异。

CSS:

.dashboardBackground
{
  width: 100%;
  height: 100%;
  background-color: #ececec;
  padding-right: 10%;
  padding-left: 10%;
  padding-top: 40px;
  padding-bottom: 40px;
}

这是包含表格的区域:

.dashboardContent
{
  margin-left: auto;
  margin-right: auto;
  position: relative;
  -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
  -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
  padding: 10px;
  background: white;
}

应用程序本身是建立在 Laravel 框架上的，所以我不认为问题出在 HTML 中，因为任何包含具有多个条目的表格的页面都会显示此问题。

除了尝试将页脚固定到屏幕底部的绝对位置之外，我还尝试使用 inline-block 属性。

如有任何意见，我们将不胜感激。

Answer 1

可以添加

.dashboardContent
{
...
    position: relative;
    z-index: -1;
}

这会将您的内容设置在页脚后面