opacity css element showing through

1Opacity Affects Stacking Order
2Consider the following HTML snippet:
3
4<div class="wrapper tweak">
5    <div class="overlay"> 
6        <p>The Overlay Panel</p>
7    </div>
8    <div class="content">
9        <p>The main Content panel with a motif: 
10           <b>&hearts;</b> <b class="foggy">&spades;</b></p>
11    </div>
12</div>
13and the following CSS:
14
15.wrapper {
16    position: relative;
17    outline: 1px solid blue;
18}
19.overlay {
20    position: absolute;
21    top: 0;
22    left: 0;
23    background-color: white;
24    border: 1px dotted blue;
25    width: 400px;
26}
27
28.content p b {
29    background-color: black;
30    color: white;
31    padding: 0 10px;
32    opacity: 1.0; /* default value */
33}
34.content p b.foggy {
35    opacity: 0.4;
36}
37
38.tweak .overlay {
39    z-index: 1;
40}
41Basically, I have a wrapper with two child div's, .overlay and .content. Note that the overlay is ahead of the content in the code (DOM). If it were after, you would not have seen the problem in the first place.
42
43The content has two bold elements with two different opacity values.
44
45See the basic line in the demo fiddle is at: http://jsfiddle.net/audetwebdesign/DxQZv/
46
47When you enable the overlay, the .foggy element with opacity of 0.4 appears in front of the overlay. The stacking order for this arrangement is, from back to front: the in-flow content with opacity of 1.0 (default), the absolutely positioned overlay, then the element with opacity 0.4.
48
49However, if you explicitly set z-index: 1 to the .overlay (add the .tweak class), then .overlay gets placed higher in the stacking order.
50
51There are other ways of adjusting the z-index value to get the same effect, but this may be the simplest.
52
53Reference:
54
55See 9.9.1 Specifying the stack level: the 'z-index' property in the CSS2 spec
56and 3.2. Transparency: the ‘opacity’ property in the CSS3 Color Module spec.
57
58Technically, adding an opacity value (other than 1.0) to an element creates a new stacking context with z-index of 0, which is also what happens with a positioned element.
59
60However, when two elements have the same z-index, they are painted in the order they appear in the DOM (tree order). In this case, the overlay is painted first followed by the bold element with opacity of 0.4, which is why it appears in front of the overlay.
61
62There is also an earlier question that deals with the same issue:
63
64What has bigger priority: opacity or z-index in browsers?
65
66which I found after I posted my answer.