285493 - you can see through red div even though color AND background image is set

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Marko Samastur]

User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

I tested this in Firefox 1.0 and 1.0.1 (Mac and Windows) and Mozilla 1.6 (Mac).

I have two divs, red one lying over the green one (using z-index property). I
shouldn't see covered parts of green one, but I can see its text even where I
shouldn't (on red div). This is different than CSS2 specification and different
than other browsers handle it.

According to CSS spec (http://www.w3.org/TR/CSS21/visuren.html#z-index)
background is transparent UNLESS color is set. In my case I have a red
background image over grey background and neither works (I used background image
hoping to find a workaround, because using only color didn't work).

Reproducible: Always



Expected Results:  
See green div and its content only where it's not hidden behind a red div.

Comment 1

[Hermann Schwab]

(In reply to comment #0)

> Expected Results:  
> See green div and its content only where it's not hidden behind a red div.

wfm Mozilla/5.0 (Windows; U; Win98; de-DE; rv:1.7.5) Gecko/20041108 Firefox/1.0
wfm Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.8b2) Gecko/20050309

Comment 2

[Boris Zbarsky [:bzbarsky]]

> I have two divs, red one lying over the green one (using z-index property)

z-index only applies to positioned elements, which these are not.  See "applies
to" text under <http://www.w3.org/TR/CSS21/visuren.html#z-index>.  So this
testcase should render identically with all "z-index" declarations removed in a
browser conforming to CSS 2.1.

> but I can see its text even where I shouldn't (on red div)

This is the correct rendering per CSS 2.1 -- the painting order for
non-positioned blocks is the background, then floated boxes, then the foreground
(which is what you're seeing here).