在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; on .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;
}