Opacity and stacking context
Toggle the control above to switch the opacity of div#f between 0.99 and 1. The black backgrounded paragraph is a child of div#f with z-index: 1 applied.
opacity values less than 1 create a local stacking context. Child elements are stacked within their parent. Elements in other stacking contexts can't (and won't) be stacked in between a child layer and its parent layer. opacity is not the only property that can trigger a local stacking context. Other properties include transform and filter when the value is something besides none
div#f
div#g