Div set to back z-index if not position:absolute/fixed

Div set to back z-index if not position:absolute/fixed

I have an issue, in my other site, this all works for me, but for my new
one, it's not. But here's my issue, I am trying to have different sections
on my website, so I'm not setting the position to the sections with any
value ex. Top, left. I'm not giving them a postion:absolute in CSS or
anything, because I want them to "stack".
But right now, they are going behind everything on my website, as if there
z-index is below the other ones, but it's definitely not with how much
I've played with it.
Here is my code and, click here for an example on JSFiddle.
HTML
<div id="bg_reg"></div>
<div id="bg_blur"></div>
<div id="section2">You can't see this div.</div>
Javascript
$(function() {
// hide #back-top first
$("#bg_blur").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 70) {
$('#bg_blur').fadeIn(600);
} else {
$('#bg_blur').fadeOut(600);
}
});
});
});
CSS
#section2{
width:100%;
background:url(../images/white.jpg) #FFF;
-webkit-box-shadow: 0px 0px 30px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px rgba(50, 50, 50, 1);
z-index:150;
}
#bg_reg {
background: url(../images/bg_reg.jpg) no-repeat right top;
background-size: cover;
position: fixed;
bottom: 0%;
left: 0%;
width: 100%;
height: 100%;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
-ms-transition: opacity 500ms;
transition: opacity 500ms;
z-index:0;
}
#bg_blur {
background: url(../images/bg_blur.jpg) no-repeat right top;
background-size: cover;
position: fixed;
bottom: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index:0;
}
Probably a really stupid question and someone will know the answer easy,
but I'm stumped. Thanks for all help in advance!