When opacity is applied to an element it is pushed onto the display stack independent of its parent element. This result in the content maintaining its flow within the document but appearing above positioned content. This is not typically noticable, but if you have an element with fixed positioning that occurs in the underlying HTML code prior to the opacity-styled element it will become apparent when you scroll the page.
On this page there is a red bar positioned at the top of the viewport and a blue bar positioned
below it using position:
fixed.
The indicated paragraph has an opacity and will appear over the red bar, which is located before
the opacity text in the HTML code.
This paragraph has an opacity style applied.
To have the positioned elements display above the opacity-styled text you need only give the
positioned elements a z-index greater
than zero. Click
here to add a z-index to the red bar.