Re: [CSS21] Layered presentation, z-index hard to comprehend

Thanks, I read Paolo Lombardi's tutorial but unfortunately it didn't touch 
on the subject of negative stack levels and the contradiction in the specs. 
Firefox (1.5.0.7, 2.0 RC1) and Opera (9.02) interpret the specification 
differently. Consider this example:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>z-index test</title>
<style type="text/css">
div {
	position: relative;
	height: 150px;
	width: 150px;
}
.outer {
	background: blue;
	z-index: 0;
}
.inner {
	background: red;
	top: 20px;
	left: 20px;
	z-index: -1;
}
</style>
</head>
<body>

<div class="outer">
	<div class="inner">
	</div>
</div>

</body>
</html>

On Firefox, the blue square is in front of the red square, while on Opera 
it's the other way around. Either one browser has it right while the other 
one is buggy (i'd guess Firefox) or a consensus on what is the correct 
behaviour doesn't exist.

Regards
Roger Olsson

>Nope, you're not missing anything. It is confusing, poorly worded,  and 
>correct. There's a considerably more legible discussion of z- index here: 
>http://developer.mozilla.org/en/docs/Understanding_CSS_z- 
>index:The_stacking_context
>
>Cheers... Mike
>
>>Hello,
>>
>>I find the explanation of layered presentation in chapter 9.9 of  the CSS 
>>2.1 draft confusing. Here's why:
>>
snip
>>
>>3) "Each stacking context consists of the following stacking levels  (from 
>>back to front):
>>
>>1. the background and borders of the element forming the stacking  
>>context.
>>2. the stacking contexts of descendants with negative stack levels."
>>
>>This concept of "stacking levels" is weird, because it's used  together 
>>with "stack levels", that are something totally different.  StackING 
>>levels seem to impose a super-structure on them. Appendix  E uses the 
>>terms "stacking order" and "painting order" instead of  stacking levels.
>>
>>Let's presume that the stacking levels/order really determine the  order 
>>in which the different boxes are painted. The order given  seems to 
>>indicate that the background and borders of an element  that establishes a 
>>stacking context are painted _underneath_  (behind) the element's 
>>descendants, even if the descendants have a  lower stack level (< 0) than 
>>the element itself (0). On the other  hand, "boxes with greater stack 
>>levels are always formatted in  front of boxes with lower stack levels." 
>>This would be a  contradiction.

_________________________________________________________________
Express yourself instantly with MSN Messenger! Download today it's FREE! 
http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/

Received on Wednesday, 4 October 2006 22:27:51 UTC