Menu
According to the jQuery official documentation, this function should:
"Get the current coordinates of the first element in the set of matched elements, relative to the offset parent."
The following code is expected to return value 51, but it returns value 0. Could anyone provide insight as too why? Thanks in advance.
I know that adding css(top:xx) works, if so, does that mean position() only work for the case the element has the css property of top?
<html>
<head>
<style type="text/css">
.outer
{
width:200px;
height:200px;
overflow-y:auto;
border:1px dotted grey;
position:absolute;
}
.inner
{
width:50px;
height:50px;
margin-top: 50px;
border:1px solid red;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript"">
$(document).ready(function () {
$('.inner').mousedown(function (e) {
alert($(this).position().top);
})
})
</script>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
519
The . position() method allows us to retrieve the current position of an element (specifically its margin box) relative to the offset parent (specifically its padding box, which excludes margins and borders). Contrast this with . offset() , which retrieves the current position relative to the document.
Although both methods have some similarities, but the jQuery offset() method is different from the jQuery position() method. The offset() method retrieves the current position relative to the document, whereas the position() method retrieves the current position of an element relative to the parent element.
Definition and Usage The offsetTop property returns the top position (in pixels) relative to the parent. The returned value includes: the top position, and margin of the element.
jQuery offset() Method The offset() method set or returns the offset coordinates for the selected elements, relative to the document. When used to return the offset: This method returns the offset coordinates of the FIRST matched element. It returns an object with 2 properties; the top and left positions in pixels.
The API description is correct. The inner element has the (initial) default CSS property value of top:auto. There is a margin-top:50px which as you know is giving the impression that the inner element is 50px from the top, but this is not the case. jQuery will return position().top = 0 since the element's top really is 0px from the parent element.
For jQuery to return an expected value using the .position() function you would need to position the inner <div> relatively (or absolute depending on your needs) to the parent and supply a top value and remove the margin-top property, for example:
.inner {
position:relative;
top:50px;
...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
