jquery - Can a td be the relatively positioned ancestor of an absolutely positioned element? -
i have image want transition image. child of containing td
element.
so first style td .css('position', 'relative')
then create second image , give properties:
var img = $('<image src="a.png" />') .css({ position: 'absolute', top: 0, left: 0, opacity: 0, 'z-index': 1 }) .appendto($td) ;
finally animate old image , new one:
img.fadein(1000); oldimg.fadeout(1000);
at end of animation can remove old image , reset css properties.
now, works great in ie7, firefox 5 sending replacement image top left of div
containing table
instead of overlaying existing image in td
. correct behavior? td
not valid relatively positioned ancestor because it's not block element or that?
suggestions of better ways make 1 image fade welcome.
update
i switched having image inline usual, added negative top margin equal own height (since image fills cell, displays underneath image want replace). worked beautifully , didn't require absolute positioning.
so first style td
.css('position', 'relative')
check out wc3 css 2.1 specification : visual formatting model : 'position' property:
the effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, , table-caption elements is undefined.
a common workaround wrap div
position:relative
around inside td
.
are sure need using tables this?
Comments
Post a Comment