I assigned a div an index value of -2 which worked fine, but then to set a background color at 100% I added a parent <div> and set the background color to it. When I set the background color, the z-index div disappeared, if I take away the background color off then the z-index div appears. How can I set a background color to this div and still have the blue accents visible?

Here is the beginning of my site:
http://kconstable.com/VaporPress/wordpress/

The blue accents are the z-index div's (class="blueBackerBottom"), when I add a background color to id="grey" they are no longer visible.

This is the

<body>
<div id="grey">
<div id="pageWrap">
<header>
<div id="headerBacker">
<div id="logo"><a href="index.html"><img src="" width="" height="" border=""></a></div>
<nav>
<ul>
<li></li>
<li></li>
</ul>
</nav>
</div> <!-- headerBacker -->
<div class="blueBackerBottom"></div>
</header>