Question

我不知道是否可以通过CSS在absolute元素下只有一个footer relative - 由于其性质而在高度上相对不同它：要么改变内容，要么响应。我的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>

我想拥有它的原因是因为相对元素包含用户的视图，并且我使用了角色动画，这恰好发生在＆＃34;要求＆＃34;显示的元素是绝对定位的，以便获得所需的可视化。

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

我想要一个＆＃34;粘性页脚＆＃34;在页面的底部，以便它具有绝对配置等（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设置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 2

我建议使用position：fixed for your footer。

例如：

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

＆＃34;固定＆＃34;表示：相对于视口（而不是相对于具有位置的最近元素）

Answer 3

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

Answer 4

当前您的外观如下：

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

根据所写内容，页脚与内容重叠。这是真的。由于内容容器和页脚位于文档中，因此位于同一级别。这意味着它们是根据文档顺序呈现的：

内容容器已呈现
脚已渲染

话虽如此，由于页脚是最后呈现的，因此它将与内容容器的内容重叠。

要解决此问题，您需要确保在内容之前先显示页脚，或者确保以任何顺序对其进行显示，页脚都将显示在上方。

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

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

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

footer {
    z-index: 1;
}

它告诉浏览器应该将页脚渲染在其他内容元素的上方。

z-index的默认值为auto。它将转换为0值。因此，如果将z-index设置为1，则节点将在不设置z-index的情况下以相等的级别呈现在其他元素之上。

Answer 5

家长：

position: relative;

孩子：

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

将绝对div放在相对div下

5 个答案: