<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
</head><body>
б<br>ркдуфхпр
уацццау<br>цы
цуауауцпафц<br>уа
цфуа<br>аааааааааааау<br><br>
<span id="ab">Кликни на меня и увидишь див</span>
<script type="text/javascript">
function coords(elem) {
var coo;
if (elem.getBoundingClientRect) {
coo = getOffsetRect(elem);
} else {
coo = getOffsetSum(elem);
}
function getOffsetSum(elem) {
var top=0, left=0;
while(elem) {
top = top + parseInt(elem.offsetTop);
left = left + parseInt(elem.offsetLeft);
elem = elem.offsetParent;
}
return {top:top, left:left}
}
function getOffsetRect(elem) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return {top:Math.round(top), left:Math.round(left)}
}
coo.bottom || (coo.bottom=(document.body.clientHeight)-(coo.top+(coo.height||elem.clientHeight)));
coo.right || (coo.right=(document.body.clientWidth)-(coo.left+(coo.width||elem.clientWidth)));
return {top:coo.top,left:coo.left,bottom:coo.bottom,right:coo.right}
}
document.getElementById('ab').onclick = function() {
var crds = coords(this);
var div = document.createElement('div');
div.innerHTML = 'Я див';
div.style.position = 'absolute';
div.style.left = crds.left+'px';
div.style.top = (crds.top+this.offsetHeight)+'px';
document.body.appendChild(div);
}
</script>
</body></html>