css - Positioning context on table-cell element in Firefox

Question

Usually, we can set a parent element to be the context for a child's absolute positioning, as follows:

#parent {
    position: relative;
}

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

This all works fine, but when the parent has its display property set to table-cell, it doesn't work in Firefox. The positioning context for the child element will be the closest positioned ancestor above its parent.

Of note, this works everywhere else. Tested in IE8, IE9, Safari, Chrome & Opera.

See the fiddle here: http://jsfiddle.net/RZ5Vx/

Also, see this fiddle with the parent's display set to inline-block, which does work in Firefox.

---

So, is this a bug? If so, is there anyway to work around it?

Answer 1

A table-cell is meant to be inside a table, so:

See this working Fiddle!

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

Note: Since you don't have a table in there, set it.

You can see this quirksmode for the The display declaration.

---

EDITED

From the W3C recommendation :: Tables it reads

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

This is not a bug, is more like a status-bydesign thing! Please see this!

---

EDITED

To include the work around placed on the comment as requested on the question:

So, is this a bug? If so, is there anyway to work around it?

Possible work around are:

Wrap the element with a div as position:relative; See Fiddle!

#wrapper {
    position: relative;
}

Note: most practical solution!

Wrap the inner elements with a div as position:relative; See Fiddle!

#innerWrapper {
    position: relative;
}

Note: requires some definitions from the original element to be declared on the innerWrapper!