javascript - 在 div 上叠加页脚

Question

我试图通过添加 position:absolute 到 #container 和 Top: XXpx 到 .panel2 以及添加 z-index 来创建覆盖页脚，但是这不起作用，非常感谢任何帮助。

https://jsfiddle.net/z3q2wtLf/29/embedded/result/

下面是我正在尝试完成的示例

div {
    position: absolute;
    width: 200px;
    height: 200px;
}

#div1 {
    background-color: red;
}

#div2 {
    background-color: blue;
    top: 100px;
}

<div id="div1"></div>
<div id="div2"></div>

Answer 1

<div2>将是页脚？在这种情况下，只有 <div2>必须得到 position: absolute环境。另外，正如@Yaakov 已经写过的，周围的容器必须有 position: relative .

一个非常基本的设置是:

<div class="wrap_all">
  <div class="content">
    (content text text text)
  </div>
  <div class="footer">
    (footer text)
  </div>
</div>

使用以下 CSS:

.wrap_all {
    position: relative;
}
.content {
    background: red;
    margin-bottom: 50px;
}
.footer {
    position: absolute;
    bottom: 0px;
    height: 50px;
    background: yellow;
}

(margin-bottom: 50px; 上的 .content 是为了避免 .content 中的文字或图片被页脚隐藏)