617497 - div {display: table; position: relative} pushes divs{absolute} outside!

Status: RESOLVED DUPLICATE of bug 63895

(Firefox :: General, defect)

Description

[Paris Th.]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 GTB7.1 ImageShackToolbar/5.2.5
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 GTB7.1 ImageShackToolbar/5.2.5

a div styled as {position: relative; display: table} pushes the divs it contains with style {position: absolute} outside itself.

Chrome and Safari both display it as expected, that is the inner div absolutely positioned within the parent-node-div which is configured as display:relative

Also checked it with Firefox from windows and the same buggy behaviour appears.

Reproducible: Always

Steps to Reproduce:
1. <div style="display: table; position: relative; width: 100px; height: 100px; border: #00FF00 dotted 2px;">
2. <div style="position:absolute; width: auto; height: auto; border: blue solid 1px; right:0px;">position: absolute<br/>right: 0px</div>
3. </div>
Actual Results:  
inner div was placed on the right edge of the screen.

Expected Results:  
inner div should be attached on the right side of the parent div

check the provided link and/or run the code provided in step to reproduce to see for yourself.

Comment 1

[philippe (part-time)]

That is a known issue - and element with display table or a table cannot be the containing block for an absolute positioned element.