Javascript-форум - Определение "абсолютности" позиционирования

Доброго времени!

Разбирая пример, напоролся на ~~проблему~~ при вставке элемента subject в элемент target.

Добавление координат границ target-а (по getBoundingClientRect()) к top и left subject-а не оправдано в случае, если target имеет style.position="absolute".

Вот пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>My own animation test.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <style type="text/css">
      .indicator{
        width: inherit; height: inherit;
        background-color: gray;
        position: absolute;
      }
      .Clickable{
        margin-left: 30%;
        margin-right: 30%;
        width: 40%;
        border: 1px solid gray;
        cursor: auto;
        /*position: absolute;*/
      }
      .Removable{
        position:absolute;
        background-color: silver;
        border:1px solid aqua;
        opacity:0.5;
      }
    </style>
    <script type="text/javascript">
      var iter_count = 0;

      function getOffsetRect(elem) {
        // (1)
        var box = elem.getBoundingClientRect()

        // (2)
        var body = document.body
        var docElem = document.documentElement

        // (3)
        var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
        var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft

        // (4)
        var clientTop = docElem.clientTop || body.clientTop || 0
        var clientLeft = docElem.clientLeft || body.clientLeft || 0

        // (5)
        var top  = box.top +  scrollTop - clientTop
        var left = box.left + scrollLeft - clientLeft

        return { top: Math.round(top), left: Math.round(left) }
      }

      $(document).ready(function(){
        $(document).click(function(event){
          event = event || window.event
          var clickedElem = event.target || event.srcElement
          if(clickedElem.className.indexOf('Clickable', 0) >= 0){

            var container = document.createElement('DIV')
            container.innerHTML='<div class="Removable"><div class="indicator"></div></div>'
            var pro = container.firstChild
            
            pro.style.zIndex = clickedElem.style.zIndex + 10;
            pro.style.height = clickedElem.clientHeight + 'px'
            pro.style.width = clickedElem.clientWidth + 'px'
            var br = getOffsetRect(clickedElem)
            pro.style.top = br.top + 'px'
            clickedElem.appendChild(pro)
            var indic = pro.firstChild
            if(pro.clientHeight > 16){
              indic.style.height = '16px'
              indic.style.top = (pro.clientHeight - 16) / 2 + 'px'
            }
            $(indic).animate({left: clickedElem.clientWidth, width:0}, 2000, null, function(){pro.parentNode.removeChild(pro)})
          }else if(clickedElem.className.indexOf('Removable', 0) >= 0){
            clickedElem.parentNode.removeChild(clickedElem)
          }else if(clickedElem.className.indexOf('indicator', 0) >= 0){
            var parent = clickedElem.parentNode
            parent.parentNode.removeChild(parent)
          }
        });

        var lastchild = $(".Clickable")[0]
        var parent = lastchild.parentNode
        while(iter_count++ < 39){
          var elem = lastchild.cloneNode(true)
          elem.innerHTML = elem.innerHTML.replace("I'm the very first!", "I have been appended later as #"+iter_count)
          if(iter_count % 3 ==0) {
            elem.style.position = 'absolute'
            elem.innerHTML = "I'm positioned absolutely! Try to click ME!"
            parent.insertBefore(elem, $(".dummy_separator")[0])
          }else parent.insertBefore(elem, lastchild);
        }
      });
    </script>
  </head>
  <body>
    <div class="dummy_separator"> 
      I'm very dummy separator... <br/>Don't click me!
    </div>
    <div class="Clickable">
      TODO: click here, I'm the very first!
    </div>
  </body>
</html>

Делов-то! Определить, значение style.position у target-а...

... но как??:blink: ??:D ??:-E ??:-/