I had to build a website recently that used fixed positioning on most items except for a content area that scrolled. The fixed items (or absolutely positioned ones) still needed to shift when the page re-sized if content would roll to the next line. So I had to come up with a clever way to handle dynamic absolutely positioned elements. The following is what I came up with. It just loops through each child of the body. On each child, it finds the previous item (without a ‘skip’ class) and calculates that item’s top css attribute plus it’s height.
<script type=”text/javascript” charset=”utf-8″>
$(function(){
jQuery(window).resize(function(){
jQuery(‘body’).children().each(function(){
var $this = jQuery(this);
var $prev = jQuery(this).prevAll().not(‘.skip’).first();
if($prev.length > 0){
var newTop = $prev.outerHeight(true) + parseFloat($prev.css(‘top’));
jQuery(this).css({top:newTop+’px’});
}
});
});
jQuery(window).trigger(‘resize’);
});
</script>
Check out the demo:
http://www.aaronvanderzwan.com/playground/dynamic_absolutes/index.html