CSS fixed header overlapped by elements only when they are transparent

Question

I'm working on this website template and I keep running into issues. My biggest one right now is that when the fixed header goes over the content boxes, the semi-transparent boxes overlap the header until the user hovers over the box and causes it to return to an opacity of 1. I'm not sure why it does this and I'm really desperate to get this fixed. Any help is appreciated.

Here's a snippet relating to my content boxes:

#wrapper {
    width: 960px;
    margin: 0 auto;
    text-align: left;
    -o-transition: .25s;
    -ms-transition: .25s;
    -moz-transition: .25s;
    -webkit-transition: .25s;
    transition: .25s;
    opacity: 0.5;
}
#wrapper:hover {
    width: 960px;
    margin: 0 auto;
    text-align: left;
    opacity: 1;
}

And here's the full fiddle: http://jsfiddle.net/rkgy5zvz/

Answer 1

 #nav {
    position: fixed;
    background-color: #222;
    opacity: 1;
    width: 100%;
    top: 0;
    z-index: 99999;
}

Just add the z-index property with the proper number. Here the JSfiddle