Fancy CSS Opacity Property Behavior

Question

While working on a task where I had to have a fixed positional panel at the top of the scrollable panel, I came across this bizarre (?) Behavior of the CSS opacity property.

This simplified violin is self-learning, but sums up: If you have two DIVs, one is fixed and the other is scrolling behind (?) Fixed, then translucent content (opacity <1) in the scrollable div is displayed on top of the fixed div. The transparency of a fixed div does not matter here.

As long as the problem goes away, if I assigned a fixed div z-index more than a scrollable div (see this fiddle ), I’m still interested to know why the opacity property in the counter behaves in an intuitive way in this case.

Can someone explain?

By the way, the behavior is consistent between Chrome 35, FF 30, and IE 10.

Copying code from jsfiddle here is how it's normal.

CSS

.fixedOpaqueDiv { position: fixed; background-color: #ABABAB; width: 100%; height: auto; text-align: center; font-size: 20px; color: #DDDDDD; padding-top: 5px; opacity: 1; } .scrollingDiv { padding-top: 140px; text-align: center; color: blue; font-weight: bold; } .opaque { opacity: 1; } .translucent { opacity: 0.5; } 

HTML

 <div style="height: 300px; overflow: auto;"> <div class="fixedOpaqueDiv">I am a div with fixed position, <BR>with same z-index as the div below. <BR>I am supposed to be Opaque, but <BR>apparently I am opaque ONLY to the opaque divs below, <BR>and not to the translucent ones</div> <div class="scrollingDiv"> <div class="translucent" style="color: red; padding: 5px;">^^^^^^^^ Scroll up ^^^^^^^^</div> <div class="opaque">Opaque 1</div> <div class="translucent">Translucent 1</div> <div class="opaque">Opaque 2</div> <div class="translucent">Translucent 2</div> <div class="opaque">Opaque 3</div> <div class="translucent">Translucent 3</div> <div class="opaque">Opaque 4</div> <div class="translucent">Translucent 4</div> <div class="opaque">Opaque 5</div> <div class="translucent">Translucent 5</div> <div class="opaque">Opaque 6</div> <div class="translucent">Translucent 6</div> <div class="opaque">Opaque 7</div> <div class="translucent">Translucent 7</div> <div class="opaque">Opaque 8</div> <div class="translucent">Translucent 8</div> </div> </div> 

Answer 1

This is because an element with an opacity less than 1 creates a stacking context . Elements that do not create stacking contexts will be obscured by your fixed position element, as expected, but translucent elements that create stacking contexts will be painted in front because they appear after the fixed position element in the source.

The reason for setting z-index is because you are making the stack level of a fixed position item greater than the contents of the scrollable item.

Section 9.9 of the CSS2.1 specification summarizes the exact order in which elements are stacked. The last two items in the list apply to this scenario:

In each stacking context, the following layers are colored in reverse order:

• The background and borders of the element that forms the styling context.
• child stacking contexts with negative stack levels (primarily negative).
• Incoming, non-embedded, non-positional descendants.
• non-positioned floats.
• embedded streams inline, inline-level, including embedded tables and embedded blocks.
• child stacking contexts with stack level 0 and spaced children with stack level 0.
• child stacking contexts with positive stack levels (first the smallest positive).

In # 6, "child stack contexts" refer to translucent elements, and a positioned child refers to a fixed element. After you set the z-index to a fixed element, it falls under # 7, which ensures that it appears above the translucent content.