posicionamiento absoluto dentro de una mesa

Necesito posicionar algo con posicionamiento absoluto dentro de un td. Para evitar el hecho de que un td no está definido al configurarlo en relativo, utilizo un conjunto div a relativo dentro de mi td y luego dentro de ese div Tengo un div interno configurado en absoluto. Todo esto funciona muy bien cuando tengo contenido llenando el td. Cuando configuro el contenido del td para que muestre ninguno, el posicionamiento absoluto se arruina.

¿Alguien sabe por qué esto sería?

HTML:

A

B

Y CSS:

 td{ border:1px solid red; width:100px; height:60px; vertical-align:bottom; } .slot{ width:100px; height:29px; background-color:#999; border:1px dashed blue; } .relative{ position:relative; } .absolute{ position:absolute; top:5px; left:5px; } .hidden{ display:none; } 

Y una versión en vivo: http://jsfiddle.net/HgEtQ/

En el violín de arriba puedes ver que la primera celda de la tabla funciona correctamente. El div absolutamente posicionado está en el espacio correcto. El segundo ha escondido la ranura superior y ahora el posicionamiento absoluto ya no está en la esquina superior izquierda. Si sacas ambas ranuras, entonces realmente arruina la posición absoluta. Necesito posicionarlo absoluto porque algunos de los elementos se cambiarán dependiendo del elemento.

Hay un par de cosas sucediendo aquí.

Tu tienes esto:

 td { /*...*/ vertical-align:bottom; } 

Eso empujará el contenido de las celdas al fondo.

Además, un elemento posicionado absolutamente se elimina del flujo normal para que no contribuya a la altura de su padre:

Se elimina completamente del flujo normal (no tiene ningún impacto en los hermanos posteriores). Un cuadro de posición absoluta establece un nuevo bloque de contención para niños de flujo normal y descendientes de posición absoluta (pero no fija).

En particular, esto significa que sus elementos div.relative tienen una altura de cero, pero seguirán teniendo una esquina superior izquierda, por lo que sus compensaciones de posicionamiento absoluto están ancladas en algún lugar.

Luego tienes

y el hidden elimina el

del diseño, por lo que efectivamente tienes esto:

 

Eso combinado con la vertical-align: bottom significa que su segundo div.absolute se div.absolute 5px desde la parte superior de la div.slot y eso es 25px desde la parte inferior de la celda de la tabla.

La primera celda funciona bien porque los dos elementos div.slot visibles empujan el div.relative a la parte superior de la celda, luego el div.absolute se coloca 5px desde la parte superior del div.relative y eso es 5px desde la parte superior la celda de la mesa.

Desafortunadamente, agregar position: relative a un

es un poco dudoso en lo que respecta a los navegadores, por lo que necesitará un poco de piratería para obtener su posición correcta mientras mantiene vertical-align: bottom . Podrías reestructurar las

s así:

  

A

Y el CSS como este:

 td{ border:1px solid red; width:100px; height:60px; vertical-align: top; } .slot{ width:100px; height:29px; background-color:#999; border:1px dashed blue; } .relative { position:relative; } .nonsense { height: 62px; /* td[height] + 2 for the borders */ display: table-cell; vertical-align: bottom; } .absolute{ position:absolute; top:5px; left:5px; } .hidden{ display:none; } 

Ejemplo en vivo: http://jsfiddle.net/ambiguous/aV4nT/

O podrías usar la visibility: hidden :

oculto
La caja generada es invisible (totalmente transparente, no se dibuja nada), pero aún afecta el diseño. Además, los descendientes del elemento serán visibles si tienen “visibilidad: visible”.

en lugar de display: none para su clase .hidden :

 .hidden { visibility: hidden; } 

Esto dejará a ambos elementos div.slot ocupando espacio y afectando el diseño, pero solo se verá el segundo.

Ejemplo en vivo: http://jsfiddle.net/ambiguous/RcdNh/