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 in a

element (preferably with JS so you don't have to make massive changes) and then set the

position to relative:

CSS:

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

JS:

$(document).ready(function() {
   $("td").wrapInner('
'); 
});

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

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...