Как найти "относительную" позицию элемента в его родительском элементе? Или: Как найти мистера Блю?

У меня есть в основном 2 элемента div. Первый - это прокручиваемый контейнер, а второй - элемент, который помещается в контейнер. Я хотел бы найти y-позицию относительно контейнера прокрутки. Я завернул все это в кусок примера-кода под названием "Как найти мистера Синего?"

<div style="height:100px; border:solid 1px black; overflow-y:scroll;">
    Please scroll down...
    <br/>
    <div style="height:400px;">
    </div>
    <br/>
    <div id="MrBlue" style="height:20px; background-color:blue; color:white">
        Mr. Blue
    </div>
</div>

Итак, мне нужен оператор JavaScript/jQuery, который предупреждает вертикальную позицию Mr. Синий. div относительно контейнера прокрутки.

Ps. Если вы хотите "поиграть" с mr. Синий, отметьте http://jsfiddle.net/KeesCBakker/Qjr5q/.

Ответы

Ответ 1

Если вы можете добавить css position: relative в контейнер для обертывания/прокрутки, он будет таким же простым, как

document.getElementById('MrBlue').offsetTop

и пример jsfiddle http://jsfiddle.net/eU3pN/2/

Ответ 2

вы можете использовать положение jQuery

$(document).ready(function() {
    alert($("#MrBlue").position().top);
});

см. это jsfiddle

Обновление: Контейнер должен иметь position:relative;, иначе он не будет работать

см. обновленный jsfiddle

Ответ 3

JQuery.position()

Метод .position() позволяет нам получить текущую позицию элемент относительно родителя смещения. Сравните это с .offset(), который извлекает текущую позицию относительно документа. когда позиционирование нового элемента рядом с другим один и тот же, содержащий DOM элемент,.position() больше полезно.

Возвращает объект, содержащий свойства сверху и слева.

http://jqapi.com/#p=position