css - Fixed div with higher z-index still shows beneath -

i've got myself not quite understand regarding z-index. i've read around lot z-index not being straight forward 1 guess after trying out myself i'll try specify problem in hope solution!

for me comes down 4 items makes complicated:

1 row background color z-index: 0.

1 fixed div follows scroll z-index: 1.

1 row background color z-index: 2 (that's suppose go on top of fixed div).

1 fixed menu z-index: 3 (that's suppose go on top of else).

my problem menu falls beneath row z index: 2 though has z-index: 3, , because of fixed div z-index: 1 cannot give lower value 2!

the only solution i've found if take away z-index row z-index: 2, falls beneath fixed div , problem repeats itself.

if want have better understand problem, here's work in progress: http://www.johnmorganstudios.se/client-sevn

try using

div#top-row { z-index: 3; 

}

i think problem element you're trying use z-index: 3 on not @ same level row you're using z-index: 2 on or conflicting z-index of element above it.

if @ div#enhance class .on-top-row have z-index: 2 direct child of article element.

however, div .stickyheader class 2 down article element.

i see div#top-row has .on-top-row class maybe change class .most-toppest-row z-index: 3.