Elements with opacity styling are stacked independent of their containing object. As a result, any positioned elements that do not have a z-index declaration and that appear in the HTML code prior to an opacity-styled element will appear underneath the opacity-styled element (see example). This is the defined behavior in the CSS specification, though currently only gecko- and WebKit-based browsers (Firefox, Safari, Chrome) exhibit the “quirk” in question. From the CSS3 Working Draft:
… implementations must create a new stacking context for any element with opacity less than 1.