226554 - using z-index and float on relatively positioned elements

Status: VERIFIED INVALID

(Core :: DOM: CSS Object Model, defect)

Description

[Richard York]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6a) Gecko/20031030
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.6a) Gecko/20031030

I wrote a bit of code that uses relative positioning to create a form layout
using <div> elements.  Each relatively positioned element is given a z-index in
 order to prevent overlapping with certain absoluetly positioned elements that
appear in parent elements.  I also use the float property on nested divs that
appear back to back which does not work!  All of this works perfectly in
Internet Explorer, but alas not at all in Mozilla!

I haven't seen a good example of z-index or float working on relatively 
positioned elements in Mozilla.

Reproducible: Always

Steps to Reproduce:
1. Use nested divs each parent is positioned relatively or inheritently.  Apply
a z-index to each so that each child is farther up on the z-index scale.  If you
like at some point in the nesting throw in two divs back to back (still
z-indexed) and apply a float.

Actual Results:  
The div elements that are positioned relatively do not rise on the z-index scale
and do not float!

Expected Results:  
Look at the example URL in IE and on Mozilla, it should be pretty obvious.

Comment 1

[Richard York]

Oh I almost forgot..  the example url outputs PHP modified code for Mozilla
because The original code was completely chaotic when it rendered!  All the
elements positioned on top of the form fields and made the page unusable.

Here is a bit of code that elaborates more.  And you can simply run the code
outputted on IE in Mozilla.

<div style='position: relative; z-index: 1; width: 100%; background: black;
height: 200px; text-align: center; vertical-align: middle;'>
	<div style='position: relative; z-index: 2; width: 99%; background: white;
height: 150px;'>
	
		<div style='position: relative; z-index: 3; float: left; background: blue;'>
			Text text
		</div>
		<div style='position: relative; z-index: 3; background: red;'>
			Text text
		</div>	
	</div>
</div>

Comment 2

[Jesiah S]

If I understand the problem correctly (the float is not visible w/ a pos:rel
DIV), this this is similar to bug 217314.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Attachment: Reporter's testcase

Comment 4

[Boris Zbarsky [:bzbarsky]]

The rendering of that testcase is exactly correct.  The red background is
painted on top of the black-on-blue div, as it should be (since both are
positioned boxes with equal z-index, so are painted in document order).

What exactly is the bug?  I don't have IE to test with, so you'll need to give a
clearer description of the expected results on that testcase.

Comment 5

[Hixie (not reading bugmail)]

Safari, Opera and Mozilla agree on the rendering of that testcase.

IE puts the float above the position:relative block that follows it but that is,
as far as I remember from CSS 2.1 appendix E, wrong.

Comment 6

[Boris Zbarsky [:bzbarsky]]

Oh, I see.  Yes, IE's behavior is wrong per appendix E.  Since both boxes are
positioned and have non-auto z-index, they are rendered strictly in document
order.  The float part only affects stacking relative to the backgrounds of
non-positioned elements (to which z-index does not apply, by the way).