fixed header positioning issue

Question

Working on my portfolio and came into a problem with positioning - http://harden6615.com/portfolio/index.html - I have a fixed header nav that I used a jquery scroll on and works fine until it passes down through the work section of my site. The fixed header's depth is below the work images instead of above. Messing around with it, I realized it has something to do with position: relative, but do not know how to work around it.

I tried z-index: -1 to my work images, but this breaks the jquery hover I have on them. Anyone know of a solution to fixed positioning or if there is a solution?

Answer 1

Set a higher index to your #floatingbar DIV, rather than lowering the portfolio squares.

#floatingbar {
    z-index: 9999 !important;
}

Answer 2

I tried it in Google Chrome with the google developer tools and it works when i add this to #floatingbar :

position:fixed;
width:960px
z-index:10;