css - Positioning context on table-cell element in Firefox -

usually, can set parent element context child's absolute positioning, follows:

#parent {     position: relative; }  #child {     position: absolute;     top: 0;     left: 0; } 

this works fine, when parent has display property set table-cell, doesn't work in firefox. positioning context child element closest positioned ancestor above parent.

of note, works everywhere else. tested in ie8, ie9, safari, chrome & opera.

see fiddle here: http://jsfiddle.net/rz5vx/

also, see this fiddle parent's display set inline-block, work in firefox.

---

so, bug? if so, there anyway work around it?

a table-cell meant inside table, so:

see working fiddle!

div {     display: table;      /* line */     line-height: 28px;     padding: 0 20px;     background: #ddd;     position: relative; } 

note: since don't have table in there, set it.

you can see quirksmode the display declaration.

---

edited

from w3c recommendation :: tables reads

the computed values of properties 'position', 'float', 'margin-*', 'top', 'right', 'bottom', , 'left' on table element used on table wrapper box , not table box; other values of non-inheritable properties used on table box , not table wrapper box. (where table element's values not used on table , table wrapper boxes, initial values used instead.)

this not bug, more status-bydesign thing! please see this!

---

edited

to include work around placed on comment requested on question:

so, is bug? if so, there anyway work around it?

possible work around are:

wrap element div position:relative; see fiddle!

#wrapper {     position: relative; } 

note: practical solution!

wrap inner elements div position:relative; see fiddle!

#innerwrapper {     position: relative; } 

note: requires definitions original element declared on innerwrapper!