Позиция элемента
С помощью этих функций, можно узнавать координаты элемента на странице. Кроме этого, с помощью offset(), можно изменить координаты элемента. Имеется несколько вариантов использования функций:
Примеры использования:
$("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~