I am trying to absolutely position an element inside a table cell.
The TD has position:relative and the element has position:absolute.
This works great in all browsers except in Firefox where it is positioned relative to an ancestor relative container.
You can see this reproduced in this fiddle: http://jsfiddle.net/ac5CR/1/
Does anyone know if I miss some CSS setting that can fix that in Firefox?
the element is not a block element. add to the style display:block, you will get the needed behavior.
A possible work around would be to wrap the position:absolute element with another position:relative div. It requires an extra div, which is lame, but will give you the right result.
Example: http://jsfiddle.net/pTJUk/
Note -- this still won't give a completely correct result, as the position:relative div will be relative to the text position in the td -- crazy, right? Giving the cell a vertical-align:top will make it orient to 0,0, but of course this could be at the cost of other formatting your design requires.
It was a very old Firefox bug that have been fixed about 13 years after being reported!
You may refer to the entertaining history here: https://bugzilla.mozilla.org/show_bug.cgi?id=63895
来源：https://stackoverflow.com/questions/8789661/firefox-ignores-absolute-positioning-in-table-cells