html - superponer - poner un elemento encima de otro css

¿Cómo colocar un elemento HTML encima de otro elemento sin afectar el diseño del elemento(s) debajo?

Question

En términos generales, el diseño HTML se basa en el flujo. Cada elemento se posiciona después del anterior, ya sea a la derecha o debajo de él. Hay muchas excepciones, por supuesto, que puede obtener jugando con los estilos, pero aun así, si cambia el orden de algo, la mayoría de las cosas "fluyen" a su alrededor y le dan cabida.

Pero de vez en cuando veo cosas que se comportan de manera muy diferente, como las páginas que aparecen con "cuadros de diálogo" que flotan en el medio de la pantalla, que no están restringidas por las dimensiones de la div por la que están emparentados y no se desplazan otros elementos de diseño a su alrededor.

Estoy tratando de encontrar una manera de hacer algo similar, pero no del todo. Tengo una tabla que estoy usando para mostrar una cuadrícula (sí, en realidad usando tablas correctamente) y me gustaría colocar una imagen en la parte superior de una de las celdas de la grilla. No puedo ponerlo en la celda, porque es más grande que la celda y no quiero extender la cuadrícula, pero quiero que siempre se muestre en la misma posición con respecto a la cuadrícula, incluso si la ventana del navegador se desplaza o se redimensiona

Me imagino que tiene que haber alguna forma de que pueda hacer esto. Si pongo una ID o Clase en una de las celdas <TD> , ¿cómo creo una <Image> que no es parte de la <TD> o incluso la <TABLE> que pertenece, pero siempre se posicionará sobre la parte superior de esa celda <TD> sin desplazar nada ni afectar su distribución?

Answer 1

Para ampliar las sugerencias de CJGreen y Napolux, puede colocar la imagen en la celda de la tabla, pero colóquela de manera absoluta.

[Editar] Dado que definir la posición de las celdas de la tabla es supuestamente ilegal (por lo tanto, ignorado por Firefox), puedes ajustar el contenido de cada <td> en un elemento <div> (preferiblemente con JS para que no tengas que hacer cambios masivos) ) y luego establecer la posición <div> en relativa:

CSS:

table td > div {
    position: relative;
}
table td > div img {
    position: absolute;   
    z-index: 999;
}

JS:

$(document).ready(function() {
   $("td").wrapInner(''<div />''); 
});

Vea el violín (actualizado) aquí - http://jsfiddle.net/teddyrised/qyu3g/

Answer 2

Si lo entiendo correctamente, necesita usar propiedades de offset junto con la position:absolute .

La posición absoluta saca su imagen del flujo, la compensación puede darle la posición del elemento que desea superponer (el TD en su pregunta).

Teniendo el desplazamiento (px desde la izquierda y la parte superior de la página para el TD) puede mover la imagen a la posición correcta.

Mira aquí: http://jsfiddle.net/jrUsM/

La documentación de jQuery lo explica muy bien.

Answer 3

Si utiliza

table {position:relative;}

entonces puedes usar:

table img {
    position:absolute;
    top: #px;
    left: #px;
}

Esto desplazará la imagen a una ubicación particular dentro de la tabla que la contiene y la eliminará del flujo del resto de la mesa que la rodea.