Question

我试图通过向#container＆amp;添加position：absolute来创建一个覆盖的页脚。顶部：XXpx到.panel2以及添加z-index但是这不起作用任何帮助都非常感谢。

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

下面的

是我尝试完成的一个例子

＆＃13;

div {
    position: absolute;
    width: 200px;
    height: 200px;
}

#div1 {
    background-color: red;
}

#div2 {
    background-color: blue;
    top: 100px;
}

＆＃13;

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

＆＃13;

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中的任何文字或图片。

Answer 2

您的＃div1和＃div2应该包含在具有相对位置的元素中以便工作。

例如：

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

和css：

#container {
  position:relative;
}
#div1 {
  background-color: red;
}

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

div上的叠加页脚

2 个答案: