JS OffSet определение позиции элемента

как я понял функции вычисляют позицию какого-то элемента относительно левого верхнего угла.

Тогда вопрос а div, который нужно вывести в каком месте документа находится? Просто если он обернут в элементе с позиционированием absolute или relative, то его позиционировать надо не от верхнего левого угла, а именно от родительского элемента.

Ну возьмём более сложну функцию:

function GetOffsetLeft(element, offsetParent)

{

	var possiblyOffsetParent = offsetParent;

	var result = 0;



	do

	{

		result += element.offsetLeft;

		element = element.offsetParent;

	}

	while (element && element != possiblyOffsetParent);



	// If offsetParent is not one of real offset parents of the element calculate offset left considering the

	// document as mutual parent for both elements - so the result will be the differentce of offsetLeft values

	if (!element || !offsetParent)

	{

		var parentOffsetLeft = 0;

		while (offsetParent && offsetParent.offsetParent)

		{

			parentOffsetLeft += offsetParent.offsetLeft;

			offsetParent = offsetParent.offsetParent;

		}

		return result - parentOffsetLeft;

	}



	return result;

}



// Cross-browser method of calculation offsetTop value for specified offsetParent

// (it returns the number of pixels from the top of element supplied as 'offsetParent' parameter

// till the top of the element supplied as 'element' parameter)

function GetOffsetTop(element, offsetParent)

{

	var possiblyOffsetParent = offsetParent;

	var result = 0;



	do

	{

		result += element.offsetTop;

		element = element.offsetParent;

	}

	while (element && element != possiblyOffsetParent);



	// If offsetParent is not one of real offset parents of the element calculate offset top considering the

	// document as mutual parent for both elements - so the result will be the differentce of offsetTop values

	if (!element || !offsetParent)

	{

		var parentOffsetTop = 0;

		while (offsetParent && offsetParent.offsetParent)

		{

			parentOffsetTop += offsetParent.offsetTop;

			offsetParent = offsetParent.offsetParent;

		}

		return result - parentOffsetTop;

	}



	return result;

}

Укажем в ней, что считать нужно от некого элемента, результат полностью повторяет предыдущий скрипт.

По сути нужно, нажал на элемент, ниже его появился див с данными, выбрали и он исчез. Как на форуме, например выбор цвета при ответе.

ну дак посчитали позицию относительно верхнего левого угла страницы , добавляйте новый див как child для body(не для элемента на который щелкнули) с абсолютным позиционированием и рассчитанными координатами.

JTRTA добавил 01.06.2010 в 21:07

хотя обычно на самом деле делается все гораздо проще без расчетов позиции относительно верхнего угла, просто обертывают все в relative с позиционированный div, и отступают от него на величину высоты элемента от которого надо отступить. как например в том же выпадающем меню на css

Можно на примере, я в вёрстке не силён и именно в таких моментах.

я тут смотрю div вообще прижимается к правому краю строки и вообще не хочет уходить оттудова... глупости какие-то...

Вот пример http://www.webmascon.com/topics/coding/42a.asp

а так на самом деле все просто, главное понять как работает absolute и relative позиционирование, а именно что позиционируется относительно родительского элемента с позиционированием absolute или relative. к примеру где то в странице есть структура

<div id="d1" style="position:relative">
  <div id="d2" style="height:100px;"></div>
</div>

при щелчке на второй див добавляем childa к 1 диву

<div id="d3" style="poition:absolute; top:100px"/></div>

получаем что 1 див не выпадает из нормального расположения элементов, но 3 див позиционируется уже относительно 1 дива(не от края страницы), соответственно 100px на которые мы смещаемся, как в примере, это высота 2 дива. 3 див получается не в ходит в нормальное расположение элементов(не занимает места)