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>

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

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

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