Layering divs ordering

Question

I am having some difficulty with layering my divs. I have created a sample of the problematic area.

My Fiddle

By looking at it you can see a background image - on top of that are two blue boxes and slightly transparent black box. I require the box to be behind the two boxes but on top of the background image.

Now I did try assigning a z-index to all elements but it didn't change a thing?

<div class="hero">
    <div class="container"> 
        <div class="section group">
            <div class="col span_2_of_4">
                "headline here"
            </div>
        </div>
        <div class="section group">
            <div class="col span_1_of_4">
                sub head
            </div>
        </div>
    </div>


<div class="headerband"></div>    

</div>


.hero{
    position:relative;
    height:60%;
    background-image:url(http://asia.olympus-imaging.com/products/dslr/e520/sample/images/sample_03.jpg);
    background-size:cover;
    float: left;
    width: 100%;
}

.headerband{
    background-color: rgba(0,0,0,0.7); 
    height: 20%; 
    margin-top: -30px; 
    float:left; 
    z-index: -1; 
    width: 100%;
}

/* Main Container */
.container{
    margin: 0 auto;
    width: 960px;
    padding: 20px 0 0 0;            
}



/* Respinsive grid */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}



/*  Grid of four  */
.span_4_of_4 {
    width: 100%;
}
.span_3_of_4 {
    width: 74.6%;
    background-color: blue;     
}
.span_2_of_4 {
    width: 49.2%;
    background-color: #008394;
    color: #FFF;
    padding: 30px 20px 30px 20px;
    font-size: 30px;
    text-align:center;  
    margin-bottom: -10px;
    margin-top: 370px;
}
.span_1_of_4 {
    width: 28.8%;
    background-color: #00C1DB;
    color: #FFF;
    padding: 20px 20px 20px 20px;
    font-size: 15px;
    text-align:center;  
}

Answer 1

I accomplished what you needed by doing this

.headerband{
    background-color: rgba(0,0,0,0.7); 
    height: 20%; 
    margin-top: -30px; 
    float:left; 

    /* Drop this line => z-index: 0;  */

    width: 100%;
}

.container{
    margin: 0 auto;
    width: 960px;
    padding: 20px 0 0 0;

    /* You can use a z-index of 1 or higher. I opted for 10 */
    position: relative;
    z-index: 10;
}

See updated fiddle

UPDATE:

The z-index property won't work unless you set the position property of the element. By default the CSS position property is static (Read more about the position property]. Valid values are absolute, relative or fixed, which allows you to position elements by supplying it with a top, left, bottom, or right. Normally you set either the top or bottom properties along with a horizontal location (i.e. left or right). Relative positioning is always relative to its parent element, normally you want to use it within a parent element that has been absolutely positioned. Fixed positioning will ensure that the positioned element will always stay visible, regardless of whether the user scrolls away or not. This one is useful, in my experience, for sticky navigation menus.

Since you weren't using absolute positioning for the .container, I opted to make it relative, then give it a z-index that was higher than the headerband.

As for why I set the .headerband to a non-negative value, this is a design decision on my part. I always work with z-indexes of 0 or higher. You will see in the above link that a negative z-index is valid. To me it's more natural to work with non-negatives. I noticed that .headerband isn't using absolutely positioned. I thought it was. Ignore this paragraph.

Answer 2

The z-index property will not work unless you use the position property as well on the element. For example:

position: fixed;
position: absolute;
position: relative;

If you're not familiar with what these do, you can read more about it here. And this blog post details how z-index and positioning work together.