Позиция элемента
.offset() .position()
С помощью этих функций, можно узнавать координаты элемента на странице. Кроме этого, с помощью offset(), можно изменить координаты элемента. Имеется несколько вариантов использования функций:
.offset() .position():integer1.2
обе функции возвращают координаты выбранного элемента (JS объект с полями top и left). Если выбрано несколько элементов, то значение будет взято у первого. Метод offset возвращает координаты относительно начала страницы, а position относительно ближайшего родителя, у которого задан тип позиционирования (css-свойство position равно relative или absolute или fixed).
.offset(value):jQuery1.4
изменяет координаты всех выбранных элементов делая их равными value. Значение value должен быть объектом с двумя полями — {top:newTop, left:newLeft}.
.offset(function(index, value)):jQuery1.4
устанавливает новое значение координат элементов, которое возвращает пользовательская функция. Функция вызывается отдельно для каждого из выбранных элементов. При вызове ей передаются следующие параметры: index — позиция элемента в наборе, value — текущие координаты элемента.
Примеры использования:
$("div.content").offset() | возвратит координаты первого div-элемента с классом content, относительно начала страницы. |
$("div.content").position() | возвратит координаты первого div-элемента с классом content, относительно ближайшего родителя с заданным позиционированием. |
$(".content").offset({top:30, left:100}) | устанавливает координаты относительно начала страницы, равные (100, 30) для всех элементов с классом content. |
Замечание 1: при изменении координат с помощью функции offset, все выбранные элементы, у которых не задан тип позиционирования (то есть position = static), автоматически изменят позиционирование на относительное (relative).
Замечание 2: важно отметить, что используя метод .offset() вы получите позицию только первого элемента из всех выбранных. Если вам нужны значения координат всех элементов, то следует использовать конструкции типа .map() или .each().
В действии
Первый элемент из списка опустим на 30 пикселей.
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ ul{ margin: 10px; } .item{ float: left; height:20px; width:80px; margin: 1px; padding: 3px; background-color: #eee; list-style-type:none; } ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id="list"~gt~ ~lt~li class="item"~gt~ Выше ~lt~/li ~gt~ ~lt~li class="item"~gt~ Быстрее ~lt~/li ~gt~ ~lt~li class="item"~gt~ Сильнее ~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $(".item:first").offset(function(i,val){ return {top:val.top + 30, left:val.left}; }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~