JQuery position(). top возвращает 0 вместо реального значения

Согласно официальной документации jQuery, эта функция должна:

"Получить текущие координаты первого элемента в наборе согласованных элементов относительно родителя смещения".

Ожидается, что следующий код вернет значение 51, но оно вернет значение 0. Может ли кто-нибудь представить понимание так же, почему? Спасибо заранее.

Я знаю, что добавление css (top: xx) работает, если да, то эта позиция position() работает только для случая, когда элемент имеет свойство css верхнего?

<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>

Ответы

Ответ 1

Описание API верное. Внутренний элемент имеет (начальное) значение свойства CSS по умолчанию top:auto. Существует margin-top:50px, который, как вы знаете, создает впечатление, что внутренний элемент 50px сверху, но это не так. jQuery вернет position().top = 0, так как элемент top действительно 0px из родительского элемента.

Чтобы jQuery возвращал ожидаемое значение с помощью функции .position(), вам нужно было бы установить внутреннюю <div> относительно (или абсолютную зависимость по вашим потребностям) родительскому элементу и поставьте верхнее значение и удалите свойство margin-top, например:

.inner {
  position:relative;
  top:50px;
  ...
}

Ответ 2

Это предупреждение 0, которое на 100% правильное, потому что top только возвращает значения, отличные от 0, когда вы используете их для размещения элемента, но здесь вы используете поля и отступы для позиционирования, чтобы использовать их, чтобы получить максимальное расстояние. Как

$(document).ready(function () {
            $('.inner').mousedown(function (e) {
                alert($(this).css("margin-top"));
            })
        })

Если вы хотите использовать позицию, сделайте это

.inner
        {   position:absolute;
            width:50px;
            height:50px;
            top:  50px;
            border:1px solid red;
        }

а затем выполните обычное кодирование

Ответ 3

Помогает ли вам это?:

document.getElementById("innerDiv").offsetTop;

Или используйте jquery Offset Метод:

Метод .offset() позволяет нам получить текущую позицию элемент относительно документа. Сравните это с .position(), который извлекает текущую позицию относительно родителя смещения. При позиционировании нового элемента поверх существующего для глобального манипуляции (в частности, для реализации drag-and-drop),.offset() является более полезным.