How to position an HTML element on top of another element without affecting the layout of the element(s) beneath?

Question

Generally speaking, HTML layout is flow-based. Each element gets positioned after the one before it, either to the right of it or beneath it. There are plenty of exception

Answer 1

To expand on both CJGreen and Napolux's suggestions, you can still place the image in the table cell, but position it absolutely.

[Edit] Since defining the position of table cells is supposedly illegal (therefore ignored by Firefox), you can wrap the content of each <td> in a <div> element (preferably with JS so you don't have to make massive changes) and then set the <div> position to relative:

CSS:

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

JS:

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

See the (updated) fiddle here - http://jsfiddle.net/teddyrised/qyu3g/

Answer 2

If you use

table {position:relative;}

then you can use:

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

This will offset the image to a particular location within the containing table and take it out of the flow of the rest of the table around it.

Answer 3

If I understand it correctly you need to use offset properties together with position:absolute.

The absolute position takes your image out of the flow, the offset can give you the position of the element you want to overlay (the TD in your question).

Having the offset (px from left and top of the page for the TD) you can the move the image to the correct position.

Look here: http://jsfiddle.net/jrUsM/

jQuery documentation explains it very well.