Nesting Elements with Opacity

A few months ago, there was a thread at a forum I moderate about using multiple opacity declarations for elements and their children.

Basically, the original poster was trying to create a div with a set opacity, which was a child of another div which also had a set opacity. After some research (googling), I learned that declaring opacity on one element affects all of its children as well. Any opacity on the parent element is always going to affect the child element because, well, it is a child and is within the parent container...But it's different from other properties like background-color in the fact that you cannot override a parent's declaration within a child element.

So, if I want a container with 50% opacity to have a child that only has 70% opacity, how do I do that? Well, it takes a combination of relative/absolute positioning, and the creative use of a "background" div. If I want multiple opacities, then each element with a different opacity must be a sibling (we cannot use descendants.) If I have a parent with opaque children, we need to make it look like the parent container has the opaque background, but the secret is to add a child which fills up the whole container area and is behind all of the other children - making it look like the parent is opaque.

It's hard to describe, so maybe it's better to just check out the example of using positioning & alignment on child elements with varying opacities.