将绝对 div 放在相对 div 下

Question

我不知道是否可以通过 CSS 仅在 relative 元素下有一个 absolute footer - 由于它的性质，高度不同：内容或响应能力的变化.我的 HTML（使用 Angular 5）：

<main>
    <app-navbar></app-navbar>
    <div class="content-container" [@fadeAnimation]="routeTransition(outlet)">
        <router-outlet #outlet="outlet"></router-outlet>
    </div>
    <app-footer></app-footer>
</main>

我想要这样做的原因是因为相对元素包含用户的视图，并且我使用的角度动画恰好“要求”显示的元素是绝对定位的，以便获得所需的可视化.

问题在于，对于大型元素，我遇到了问题，因为页脚也是绝对的，如果有意义的话，确实会与实际内容重叠。

我想在页面底部有一个“粘性页脚”，以便它具有绝对配置等（app-footer 将呈现页脚）：

footer{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
}

我的 CSS：

main{
    padding-top: 10px;
    padding-bottom: 100px;
}

.content-container{
    position: relative;
}

/deep/ router-outlet~* {
    position: absolute;
    width: 100%;
    height: 100%;
}

在我将 relative 添加到 .content-container 以获得内部元素的绝对位置之前，这一切正常。

我遇到的一种可能的解决方法是为 .content-container 类提供固定高度并执行不同的分辨率，以便我可以向下推页脚。但是，我认为这可能不是最好的方法。如果有任何帮助，我正在使用 Angular 4。我还查看了How to position element below relative positioned element without overlapping?，但同样，建议的解决方案是对高度进行硬编码。

更新 1：我已经用更详细的信息更新了问题。希望现在清楚了。

更新 2：Plunker：https://plnkr.co/edit/FHhncrGBcO9jaNRiUfJQ?p=preview

Answer 1

家长：

position: relative;

孩子：

position: absolute;
z-index: 2;
top: 100%;

Answer 2

目前你的样子是这样的：

1. content-container 是一个 div。它明确设置了文档的相对位置，因为上面没有带有 position: relative 的节点
2. 在内容容器之后有一个页脚位置：绝对。由于上面没有相对位置的节点，所以对文档来说是绝对的

根据您所写的内容，页脚与内容重叠。这是真的。因为 content-container 和 footer 被定位到文档中，所以处于同一级别。这意味着它们是根据文档顺序呈现的：

1. 内容容器被渲染
2. 页脚被渲染

既然这么说，因为页脚是最后渲染的，它会与内容容器的内容重叠。

要修复它，您需要确保页脚将在内容之前呈现，或者确保无论它们呈现的顺序如何，页脚都将呈现在上面。

要更改渲染顺序，您只需在 HTML 代码中重新定位容器内容并将其放在页脚 div 之后。

但这是一个脆弱且麻烦的解决方案。

幸运的是，这个问题有一个解决方案。您可以明确指出应该在哪一层呈现元素。为此，您需要使用 z-index CSS 属性。

footer {
    z-index: 1;
}

它告诉浏览器页脚应该呈现在上方，远高于其他内容元素。

z-index 的默认值为 auto。它转换为值 0。因此，如果我们将 z-index 设置为 1，则节点将在同等级别上呈现在其他元素之上，而不会设置 z-index。

Answer 3

如果我理解您的问题，您需要设置一个position: relative 和一个z-index 到您的.content-container。

请记住，z-index 和 absolute 定位是指下一个相对父级。这是默认情况下的主体，但它可以是一个带有position: relative 的 div。

.content-container{
  position: relative;
  z-index: 2;
  
  background-color: rgba(180,100,50,.7);
  padding: 85px 20px;
}

footer{
  position: absolute;
  bottom: 0;
  z-index: 1;
  
  background-color: pink;
  padding: 20px;
}

<main>

  <div class="content-container">
    content
  </div>
  
  <footer>footer</footer>
  
</main>

Answer 4

如果我理解你，请使用 z-index
footer {z-index:0;} .content-container {z-index:1;}

Answer 5

我建议使用 position:fixed 作为页脚。

例如：

footer{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
}

“固定”的意思是：相对于视口（而不是相对于最近的具有位置的元素）