overlay footer over div

- 1 answer

Ad

I have tried to create a overlaying footer by adding position:absolute to #container & a Top: XXpx to .panel2 as well as adding a z-index however this does not work any help is greatly appreciated.

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

below is an example of what I'm trying to accomplish

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>

Ad

Answer

Ad

<div2> would be the footer? In this case, only<div2> has to get the position: absolute setting. Also, as @Yaakov already wrote, the surrounding container has to have position: relative.

A very basic setup would be:

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

with the following CSS:

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

(The margin-bottom: 50px; on .content is there so that no text or images in .content can be hidden by the footer)

Ad
source: stackoverflow.com
Ad