将绝对定位的 div 放在相对定位的 div 下面。

Question

我不知道是否仅通过CSS可以实现在一个相对元素下有一个绝对底部，因为相对元素由于其性质（内容的更改或响应性）高度可能会不同。我的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>

我想这么做的原因是相对元素包含用户视图，而我正在使用Angular动画，这些动画需要被显示的元素以绝对定位方式呈现才能得到所需的可视化效果。

问题在于，对于大型元素，我会遇到问题，因为页脚也是绝对定位的，如果这样说的话，它会重叠实际内容。

我希望在页面底部有一个“粘性页脚”，以便它具有绝对配置等（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%;
}

在我给 .content-container 添加 relative 属性以使内部元素可以绝对定位之前，一切都正常。

我找到了一个可能的解决方法，即给 .content-container 类添加固定高度，并针对不同的分辨率进行调整，以便将页脚推下来。但我认为这可能不是最好的方法。我正在使用 Angular 4，如果有帮助的话。我也看过 如何在相对定位元素下方定位元素而不重叠？，但建议的解决方案仍然与硬编码高度有关。

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

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

- Carlos Torrecillas

---

从问题中并不清楚需要在屏幕上显示什么输出。能否详细解释一下为什么要将浮动页脚放置在相对容器下方？ - pixlboy

我有什么遗漏了（HTML6？）还是这不是HTML？ - Jacek Kowalewski

Answer 1

父级元素：

position: relative;

孩子：

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

- leonheess

Answer 2

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

请注意，z-index和absolute定位是相对于下一个相对父元素的。默认情况下，这是，但它也可以是中间带有position: relative的

。

.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>

- GuCier

---

谢谢。如果“content-container”内的“content”是一个使用绝对定位的div，那该怎么办呢？这就是我现在面临的问题。我不确定这个设置是否适用于它（至少我已经尝试过了，但我没有得到期望的解决方案...因为页脚仍然重叠）。 - Carlos Torrecillas

我创建了这个 Plunker 来尝试说明问题：https://plnkr.co/edit/FHhncrGBcO9jaNRiUfJQ?p=preview - Carlos Torrecillas

Answer 3

我建议您使用position:fixed来设置页脚。

例如：

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

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

- Dieter Rehbein

---

麻烦的是，我希望它自然地放置在页面底部（不一定意味着在视口底部）。 - Carlos Torrecillas

Answer 4

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

- Dmitry Sobolevsky

---

刚试了一下，不起作用。也许我需要添加其他的东西？ - Carlos Torrecillas

抱歉，我犯了一个错误。请将这些样式添加到您的代码中 :) - Dmitry Sobolevsky

这好像不起作用，我认为是因为 content-container 内部的 div 也具有绝对定位？ - Carlos Torrecillas

我认为我们可以从这里开始：https://plnkr.co/edit/FHhncrGBcO9jaNRiUfJQ?p=preview - Carlos Torrecillas

Answer 5

目前你的代码看起来是这样的：

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

根据你所写的内容，页脚重叠了内容。这是正确的。因为 content-container 和 footer 都定位到文档上，所以它们处于同一级别。这意味着它们是基于文档顺序渲染的：

1. 先渲染 Content container
2. 再渲染 Footer

既然如此，因为页脚最后被渲染，它将覆盖 content container 内容。

要修复它，您需要确保 footer 在 content 之前被渲染，或者确保无论它们被渲染的顺序如何，footer 都会被渲染在上面。

要更改渲染顺序，您只需在 HTML 代码中重新定位 container-content，并将其放置在 footer div 之后即可。

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

幸运的是，有一个解决这个问题的方法。您可以明确指示元素在哪个渲染层上。要做到这一点，您需要使用 z-index CSS 属性。

footer {
    z-index: 1;
}

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

z-index的默认值是auto。它被翻译为0的值。因此，如果我们将z-index设置为1，则节点将在没有设置z-index的相同级别上呈现在其他元素之上。

- Tom Smykowski