在jsf页面中使用HTML组件会导致HTML组件坐标不准确

Question

您好我放了一个HTML组件，另一个HTML组件对齐在html页面内非常好，例如：在html页面中放置div组件和输入组件对齐。

但是，当我将移植后的代码放入JSF页面时，它们不能通过以下代码进行精确对齐：

/**
*get the first component coordinates
* @param data DOM object
*/
 function getLablePosition(data) {
            var t = data.offsetTop;
            var l = data.offsetLeft;
            var h = data.offsetHeight;
            var w = data.offsetWidth;
            while (data = data.offsetParent) {
                t += data.offsetTop;
                l += data.offsetLeft;
            }
            var point = eval("({x:" + l + ",y:" + t + ",h:" + h + ",w:" + w + "})");
            return point;
}
/**
*Let the second component and the first component alignment
*/
function aligComponent(){
            //auto_msg is the second html component 
            var framePos = getLablePosition(data);
            auto_msg.style.top = framePos.h + framePos.y + "px";
            auto_msg.style.left = framePos.x+"px";
  }

当然，如果只有两个组件，我可以调整第二个组件的位置。最大的问题是：在JSF页面中，有多个这样的HTML组件，如果每个组件都要调整位置，那么会很麻烦的。 我该如何解决这个问题？