Semi-transparent (opacity != 1) elements render above fixed element

One may see a strange effect where a semi-transparent element is rendered above a static element like a fixed page header. This is because giving an opacity other than 1 to an element creates a new stacking context. A possible solution is to add z-index to the static element. See the effect and experiment with the solution in the fiddle below: