jQuery функция .offset()

Раздел: Основы CSS

Описание: Получает текущие значения отступов относительно документа для элемента в наборе.

Возвращаемый объект содержит два значение (сверху и слева) типа Float . Для фактического позиционирования браузеры обычно округляют эти значения до ближайшего целого.

В некоторых случаях .offset(), может быть дробным

Этот метод работает только с видимыми элементами.

Возвращает текущую позицию относительно document а не относительно родителя!

Примеры

.offset() без опций возвращает объект, содержащий свойства top и left.

javascript:
 var offset = $(ell).offset();
// Получены значения:
var left = offset.left ;
var top = offset.top ;

.offset( функция ) Установит смещение обекта top и left

javascript:
$( ell ).offset({ top: 10, left: 30 });
html:
<!doctype html>
<html lang="ru">
<head>
 <meta charset="utf-8">
 <title>offset Живые примеры</title>
 <style>
 p {
 margin-left: 10px;
 color: blue;
 width: 200px;
 cursor: pointer;
 }
 span {
 color: red;
 cursor: pointer;
 }
 div.abs {
 width: 50px;
 height: 50px;
 position: absolute;
 left: 220px;
 top: 35px;
 background-color: green;
 cursor: pointer;
 }
 </style>
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script >
</head>
<body>
<div id="result">Кликни по элементу.</div>
<p>
 Это лучший способ, чтобы <span>найти</span> позицию.
</p>
<div class="abs"></div>
<script>
$( "*", document.body ).click(function( event ) {
 var offset = $( this ).offset();
 event.stopPropagation();
 $( "#result" ).text( this.tagName +
 " coords ( " + offset.left + ", " + offset.top + " )" );
});
</script >
</body>
</html>

Живые примеры

Кликни по элементу.

Это лучший способ, чтобы найти позицию.