Интересная статья. У меня ворос для разработчиков, которые смотрели в код популярных библиотек (jQuery, Mootools, Prototype, extJS) как там реализованно вычисление координат?

Давно искал урок как найти абсолютную позицию, "Комбинированный вариант" подходит отлично.

Хорошая статья. Добавлю только что стоит проверять body что он есть, те body&&body.clientTop

Статья супер!МОЛОДЕЦ!

В Opere 9.20 не работает.Видимо в версии 9.62 уже поддерживается.

Большое спасибо за ёмкую статью по существу. А то копать по всем стандартам довольно затруднительно %^>

в MooTools 2.2.3, как на меня сама удачная реализация определения координаторов с поддержкой getBoundingClientRect и бордеров элементов. Позволю себе привести часть исходного кода:

getOffsets: function() {
		if (this.getBoundingClientRect){
			var bound = this.getBoundingClientRect(),
			html = document.id(this.getDocument().documentElement),
			scroll = html.getScroll(),
			isFixed = (styleString(this, 'position') == 'fixed');
			return {
				x: parseInt(bound.left, 10) + ((isFixed) ? 0 : scroll.x) - html.clientLeft,
				y: parseInt(bound.top, 10) +  ((isFixed) ? 0 : scroll.y) - html.clientTop
			};
		}

		var element = this, position = {x: 0, y: 0};
		if (isBody(this)) return position;

		while (element && !isBody(element)){
			position.x += element.offsetLeft;
			position.y += element.offsetTop;

			if (Browser.Engine.gecko){
				if (!borderBox(element)){
					position.x += leftBorder(element);
					position.y += topBorder(element);
				}
				var parent = element.parentNode;
				if (parent && styleString(parent, 'overflow') != 'visible'){
					position.x += leftBorder(parent);
					position.y += topBorder(parent);
				}
			} else if (element != this && Browser.Engine.webkit){
				position.x += leftBorder(element);
				position.y += topBorder(element);
			}

			element = element.offsetParent;
		}
		if (Browser.Engine.gecko && !borderBox(this)){
			position.x -= leftBorder(this);
			position.y -= topBorder(this);
		}
		return position;
	}

function styleNumber(element, style){
	return styleString(element, style).toInt() || 0;
};

function borderBox(element){
	return styleString(element, '-moz-box-sizing') == 'border-box';
};

function topBorder(element){
	return styleNumber(element, 'border-top-width');
};

function leftBorder(element){
	return styleNumber(element, 'border-left-width');
};

function isBody(element){
	return (/^(?:body|html)$/i).test(element.tagName);
};

В JQuery глюки с clientY функции offset() и подобных в Опере и Хроме вот один из тикетов:
http://dev.jquery.com/ticket/4583

Очен помогло, спасибо!

У меня пока не работает как надо getBoundingClientRect(), так как у элементов (body и div) выставлено position:relative без смещений и есть margin у внутреннего div относительно body. Правильно отображает только Хром (Сафари 4 не проверял), остальные браузеры не учитывают margin (IE, Opera, FF), приходится его вручную дописывать к координатам.

В своё время много перечитал документации по этому вопросу. Но делалось всё под ужасно бажные IE5.5-6, старую Оперу < 9.1 и Фаерфокс. Наилучшим решение вроде казалось тогда применение getBoundingClientRect(). Но баг с тем, что эксплорер и опера под одни и те же числовые значения рисовали элементы не много, но различающиеся по размеру, иной раз сводил усилия по оформлению страницы к оценке "пойдёт". На тот момент было ужасно интересно заглянуть в код эксплорера и оперы. Кто-нибудь знает как там вычисляется размер элементов и как он соотносится с замерами окон?

Спасибо за отличную статью. Помогла мне очень, реализовал для эффекта PhotoLine, что бы определить место положение самой ленты, для прокрутки ее роликом мыши.

Спасибо. Очень помогла.

Просто хочу сказать Большое Спасибо!
Много-много здоровья и долгих лет жизни автору!
Это то, что я искал!

Точно так же реализован offset в jQuery. Но недавно столкнулся с неожиданным багом - есть у меня

с заданной шириной, всередине его есть спаны и в случаи перехода спана на новую строку - в 1 случае getBoundingClientRect дает некорректный координаты - он видит слово на предыдущей строке, а оно уже в следующей находится.

Браузер safari, платформа ipod.

Молоток! Биг сенкс фор ю
очень полезная статья

С использованием JQuery

$("#block")
.click(function(e){
X = e.pageX-$(this).offset().left;
Y = e.pageY-$(this).offset().top;
})

Вот рабочая функция. Может кому-то пригодиться. Статья понравилась. И это мой к ней комментарий. Чтобы уж совсем не был пустым коммент, выложил сию функцию.

function ElemCoords(obj)
{
var curleft = 0;
var curtop = 0;
if (obj.offsetParent)
{
while (1)
{
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
if (!obj.offsetParent)
break;
obj=obj.offsetParent;
}
}
else if (obj.x || obj.y)
{
curleft += obj.x;
curtop += obj.y;
}
return {"x":curleft, "y":curtop};
}

Получить координаты элемента можно вызовом функции, типа "ElemCoords(object).x".

автору искренняя благодарность

На лето 2011 getBoundingClientRect поддерживается всеми актуальными браузерами.

определите пожалуйста координаты элемента/клика на такой странице:

body {
                background-color:#abcabc;
                margin:0 auto;
                max-width:900px;
                min-width:800px;
                position:relative;
                width:100%;
            }

окошко браузера должно быть открыть шире чем на max-width

Превосходно! Браво! Прекрасная статья. Помогла однозначно разрулить проблемы с обработкой ситуаций сложного позиционирования (fixed->absolute->static->absolute) вложенных элементов. Достойный материал.

// координаты объекта
function getAbsolutePosition(el) {
	var r = { x: el.offsetLeft, y: el.offsetTop };
	if (el.offsetParent) {
	
		var tmp = getAbsolutePosition(el.offsetParent);
		r.x += tmp.x;
		r.y += tmp.y;
	}
	return r;
}

function left (elem) 
{
 var left=0;
	 alert(elem.offsetLeft)
	 while(elem)
	 {
	 
	left += parseFloat(elem.offsetLeft);
	
	 elem= elem.offsetParent;
	 }
	 return Math.round(left);
	 

}

как насчет такого варианта

когда я писал этот (Автор: Гость (не зарегистрирован), дата: 29 ноября, 2011 - 12:56) пример, я имел ввиду что, левый верхний угол body необязательно начинается с верхнего левого угла вьюпорта.
Посмотрите на пример и протестите его на всех IE скроля и не скроля страницу.
Сделать метод, умеющий нормально определять координаты на экране для всех браузеров, включая IE6+, включая режим совместимости, можно.
Для этого нужно всего лишь учесть поправку смещения начала координат относительно вьюпорта:

var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.left = '0px';
    div.style.top = '0px';
    div.style.display = 'block';
    document.body.appendChild(div);
    var horizontalFix = div.getBoundingClientRect().left;
    var verticalFix = div.getBoundingClientRect().top;

У меня IE 7. Функция getBoundingClientRect не учитывает свойство таблиц cellSpacing при подсчете.

Супер!

Спасибо, отличная статья - помогла!

что делать, если имеется пустой div или br на странице, как вычислить его координаты, getBoundingClientRect возвращает прямоугольник с нулевыми координатами?

Подскажите, пожалуйста. А можно решить такую задачу - имеется определенное слово, необходимо проверить есть ли оно на экране, если есть - выдать его координаты.

Адреса страниц

Добрый день. Ситуация следующая. Есть множество елементов на странице, создаются они юезром, ограничения на создание по количеству нет. Можно удалять старые и создавать новые. Их можно ресайзить и перетаскивать. Все они имеют братски-сестринские связи. Как мне сравнить координаты одного елемента, выбранного юзером, с другими, для запрета пересечения элементов друг-другом?

В статье не учтено, что родитель элемента (или любой вверх по цепочке) может иметь position: sticky, и вся схема просто рухнет, хоть с offsetParent, хоть с getBoundingClientRect. При нулевой прокрутке всё сработает верно, а потом.. Впрочем предлагаю просмотреть пример с демонстрацией проблемы:
jsfiddle.net/rafaylik/sf5Lcrjp

Как можно поступить, если родитель имеет position: sticky:

1. Сохранить position родителя в переменную
2. Назначить родителю position: relative
3. Получить координаты элемента
4. Вернуть родителю его первоначальный position

И рабочий пример (спасибо Malleys за совет):
jsfiddle.net/Lk74do8u