Check out the jQuery dimensions plugin to find the correct position of an element.
EDIT:
As mentioned in the comments, the dimensions plugin was merged into the core. Documentation can be found here: offset and here position.
The linked example could be extended like this: Replace the following code
var x = $("#Company_Name").position().left;
var y = $("#Company_Name").position().top;
$("p:last").text( "Full Name: left: " + x + ", top: " + y );
with this:
var $companyname = $("#Company_Name");
var x = $companyname.position().left;
var y = $companyname.position().top;
var ax = $companyname.offset().left;
var ay = $companyname.offset().top;
$("p:last").text( "Full Name: left: " + x + "/" + ax + ", top: " + y + "/" + ay);
notice, I searched the element only once and stuffed it into a variable. That's a good idea if the search can take some time.
EDIT2:
I just realized, that this does not work as I expected it. I wrote some function to calculate the relative position:
function toString(obj){
return "{top: " + obj.top + " left: " + obj.left + "}";
}
function getRelativePosition(selector){
var $parentElem = $("#parentElem");
var $element = $(selector);
var elementPosition = $element.position();
var parentPosition = $parentElem.position();
return {top: elementPosition.top - parentPosition.top,
left: elementPosition.left - parentPosition.left};
}
$(document).ready(function(){
var position = $("#Company_Name").position();
var relativePosition = getRelativePosition("#Company_Name");
$("p:last").text("position: " + toString(position) + " relativePosition: " + toString(relativePosition));
});
Let me know if this works for you. And someone may tell me what the difference between position and offset in jQuery :-\
EDIT3:
To get the position of more then one element, you could call the functions with different ids or give them all the same name or the same class to have something to select them all. Here is a working example:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function toString(obj){
return "{top: " + obj.top + " left: " + obj.left + "}";
}
function getRelativePosition(selector){
var $parentElem = $("#parentElem");
var $element = $(selector);
var elementPosition = $element.position();
var parentPosition = $parentElem.position();
return {top: elementPosition.top - parentPosition.top,
left: elementPosition.left - parentPosition.left};
}
$(document).ready(function(){
$(".cardfield").each(function(i){
var position = $(this).position();
var relativePosition = getRelativePosition(this);
$("p:last").append("element: " + this.id + " position: " + toString(position) + " relativePosition: " + toString(relativePosition) + "<br>");
});
});
</script>
</head>
<body>
<br><br><br><br><br>
<div id="parentElem" style="margin: 0px; top:10px; background-color: #ddd;">
<br><br>
<div class="cardfield" id="Company_Name1">Foo Bar</div>
<br>
<div class="cardfield" id="Company_Name2">Company Name</div>
<div class="cardfield" id="firstname" style="float: right;">Tim</div><br/>
<div class="cardfield" id="lastname" style="float: right;">Büthe</div>
<br><br>
</div>
</p></p>
</body>
</html>
Note: I gave all fields the class "cardfield" and used the jQuery to select them. Then I used the each function to work with the elements. Inside the function I gave to each, "this" refers to the current object.