Issues with position:relative and absolute. How to put a div on top of 2 other divs?

Question

css

Here is codepen.io/anon/pen/meONog . You need to do as in the picture screenshot.ru/c2a35318cfa1b277a69dde7f59a87add . Gave to the top block:

.wrapper-banner .container {
  left: 50%;
  margin-left: -470px;
  position: absolute;
  z-index: 2;
 }

I gave the block itself what should be on top of the banner and footer:

.wrapper-main .container {
  border: 1px solid #dfdfdf;
  top: -30px;
  position: relative; 
  z-index: 3; 
  
}

and wrote the footer like this:

.wrapper-footer .container {
  left: 50%;
  margin-left: -470px;
  position: absolute;
  z-index: 2;
}

Everything worked at the top, but it doesn’t work at the bottom. Tell me, please, how to fix it?

Answer 1

If I understand correctly:

.container{ background: #fff; }
.wrapper-footer{ margin-top: -60px; }

Answer 2

The problem is that your footer appears after the block, which should be on top of the rest. The z-index parameter is relative and is taken relative to the current position.
The simplest is to use JS. It's possible with jQuery...

$(document).ready(function(){
    $('.wrapper-main').css('z-index',999);
});