z-index and opacity issues

Question

I'm trying to make a wrapper at the back off all of my DIV's that will appear transparent (opacity: 0.6), but everything in front of that is appearing transparent too.

Any ideas how to fix this?

You can find the example here: http://testing.squaretise.com/ (I have given the wrapper (#wrap) a red border so you can interpret easier)

Solution

You'll need to position your transparent div absolutely.

http://www.w3.org/TR/css3-color/#transparency explains how the descendants pick up the transparency.

Comments

[CBroe]

“Opacity is inherited” – no, it is not (not in the sense that CSS defines “inheritance”.) If it was, a parent having opacity: .5 set would mean the child would have that same value automatically as well (if it doesn’t have its own value set), and so the opacity for the child content would be .5 * .5 = .25 – because opacities are multiplied. Instead, the child has the default value of 1, and therefor its content gets the same opcaity value applied as the parent, .5 * 1 = .5