Firefox soporta position: relative en los elementos de la tabla?

Eso no debería ser ningún problema. Recuerde también establecer:

display: block;

Dado que todos los navegadores web, incluidos Internet Explorer 7, 8 y 9, manejan correctamente la posición:relativa en un elemento de visualización de tabla y solo FireFox maneja esto incorrectamente, su mejor opción es usar una cuña JavaScript. No debería tener que reorganizar su DOM solo por un navegador defectuoso. La gente utiliza JavaScript shims todo el tiempo cuando IE se equivoca y todos los demás navegadores lo hacen bien.

Aquí hay un jsfiddle completamente anotado con todo el HTML, CSS y JavaScript explicar.

Http://jsfiddle.net/mrbinky3000/MfWuV/33 /

Mi ejemplo de jsfiddle anterior usa técnicas de "Diseño Web responsivo" solo para mostrar que funcionará con un diseño responsivo. Sin embargo, su código no tiene que ser sensible.

Aquí está el JavaScript a continuación, pero no tendrá mucho sentido fuera de contexto. Por favor, echa un vistazo al enlace jsfiddle de arriba.

$(function() {
    // FireFox Shim
    // FireFox is the *only* browser that doesn't support position:relative for
    // block elements with display set to "table-cell." Use javascript to add
    // an inner div to that block and set the width and height via script.
    if ($.browser.mozilla) {

        // wrap the insides of the "table cell"            
        $('#test').wrapInner('<div class="ffpad"></div>');

        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;

            // remove any height that we gave ffpad so the browser can adjust size naturally.
            $ffpad.height(0);

            // Only do stuff if the immediate parent has a display of "table-cell".  We do this to
            // play nicely with responsive design.
            if ($parent.css('display') == 'table-cell') {               

                // include any padding, border, margin of the parent
                h = $parent.outerHeight();

                // set the height of our ffpad div
                $ffpad.height(h);

            }

        }


        // be nice to fluid / responsive designs   
        $(window).on('resize', function() {
            ffpad();
        });

        // called only on first page load
        ffpad();

    }

});

A partir de Firefox 30, podrás usar position en los componentes de la tabla. Puedes probar por ti mismo con la versión actual de nightly build (funciona como independiente): http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk /

Caso de prueba ( http://jsfiddle.net/acbabis/hpWZk/):

<table>
    <tbody>
        <tr>
            <td style="width: 100px; height: 100px; background-color: red; position: relative">
                <div style="width: 10px; height: 10px; background-color: green; position: absolute; top: 10px; right: 10px"></div>
            </td>
        </tr>
    </tbody>
<table>

Puede seguir la discusión de los desarrolladores sobre los cambios aquí (el tema tiene 13 años de edad): https://bugzilla.mozilla.org/show_bug.cgi?id=63895

A juzgar por el historial de lanzamientos recientes, esto podría estar disponible tan pronto como en mayo de 2014. Apenas puedo contener mi emoción!

EDITAR (6/10/14): Firefox 30 fue lanzado hoy. Pronto, el posicionamiento de la tabla no será un problema en los principales navegadores de escritorio

A partir de Firefox 3.6.13, position: relative/absolute no parecen funcionar en los elementos de la tabla. Este parece ser el comportamiento de Firefox de larga data. Vea lo siguiente: http://csscreator.com/node/31771

El enlace CSS Creator publica la siguiente referencia del W3C:

El efecto de 'position:relative' en los elementos table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell y table-caption no está definido. http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme

Intenta usar display:inline-block funcionó para mí en Firefox 11 dándome capacidad de posicionamiento dentro del td/th sin destruir el diseño de la tabla. Que en conjunción con position:relative en un td/th debería hacer que las cosas funcionen. Acabo de hacerlo funcionar.

Tenía un elemento table-cell (que en realidad era un DIV no un TD)

Sustituí

display: table-cell;
position: relative;
left: .5em

(que trabajó en Cromo) con

display: table-cell;
padding-left: .5em

Por supuesto, el relleno generalmente se agrega al ancho en el modelo de caja, pero las tablas siempre parecen tener una mente propia cuando se trata de anchos absolutos, por lo que esto funcionará en algunos casos.

Al agregar display:block al elemento padre, esto funciona en firefox. También tuve que añadir top: 0px; left:0px; al elemento padre para que Chrome funcione. IE7, IE8 y IE9 también están funcionando.

<td style="position:relative; top:0px; left:0px; display:block;">
    <table>        
        // A table of information here. 
        // Next line is the child element I want to overlay on top of this table
    <tr><td style="position:absolute; top:5px; left:100px;">
        //child element info
    </td></tr>
   </table>
</td>

El tipo de solución aceptada funciona, pero no si agrega otra columna con más contenido que en la otra. Si agrega height:100% a su tr, td & div entonces debería funcionar.

<tr style="height:100%">
  <td style="height:100%">
    <div style="position:relative; height:100%">
        This will be positioned normally
        <div style="position:absolute; top:5px; left:5px;">
             This will be positioned at 5,5 relative to the cell
        </div>
    </div>
  </td>
</tr>

El único problema es que esto solo soluciona el problema de altura de columna en FF, no en Chrome e IE. Así que es un paso más cerca, pero no perfecto.

Actualizé un violín de Jan que no funcionaba con la respuesta aceptada para mostrar que funcionaba. http://jsfiddle.net/gvcLoz20 /