Cannot Place Main Content over Header

Hello,

I am trying to have the main content of the blog overlap the header by a margin-top offset, using the generate_before/after_main_content action hooks.

The effect is to place this div container:

<div id="content-lift"></div>

just inside the <main> container. This div contains the following CSS:

margin-top: -80px;
z-index: 1;

This didn't work on it's own, so I tried to ensure the z-order was correct by creating another div container and enclosing the header in that:

<div id="unfix-header"> <header></header> </div>

That div contained the following CSS:

z-index: 0;

I don't understand why the header image continues to be on top despite these changes.