Отображение одного блока над другим с помощью jQuery

20.03.2011 0:01 / Артём Волк / 613 просмотров / ...

Быстрое решение (оригинал) для позиционирования одного блока на другим, упрощённый аналог Position из jQuery UI.

/*
	Based on:
	http://snippets.aktagon.com/snippets/310-Positioning-an-element-over-another-element-with-jQuery

	Changes:
	- Added vertical align option
*/
(function($) {
	$.fn.positionOn = function(element, alignHorizontally, alignVertically) {
		return this.each(function() {
			var target   = $(this);
			var position = element.offset();

			var x      = position.left; 
			var y      = position.top;

			if(alignHorizontally == 'right') {
				x -= (target.outerWidth() - element.outerWidth());
			} else if(alignHorizontally == 'center') {
				x -= target.outerWidth() / 2 - element.outerWidth() / 2;
			}

			if(alignVertically == 'bottom') {
				y -= (target.outerHeight() - element.outerHeight());
			} else if(alignVertically == 'center') {
				y -= target.outerHeight() / 2 - element.outerHeight() / 2;
			}

			target.css({
				position: 'absolute',
				zIndex:   5000,
				top:      y, 
				left:     x
			});

		});
	 };
})(jQuery);