.position()

.position( options )Возвращает: jQuery

Описание: Позиционирует элемент относительно другого.

версия добавлена: 1.8.position( options )
- options
  
  Тип: Объект
  - my (по умолчанию: "center")
    
    Тип: Строка
    
    Определяет, какая позиция на позиционируемом элементе будет выровнена с целевым элементом: выравнивание по "горизонтали вертикали". Одно значение, например "right", будет нормализовано к "right center", "top" будет нормализовано к "center top" (в соответствии с соглашениями CSS). Допустимые горизонтальные значения: "left", "center", "right". Допустимые вертикальные значения: "top", "center", "bottom". Пример: "left top" или "center center". Каждая размерность также может содержать смещения в пикселях или процентах, например, "right+10 top-25%". Процентные смещения относятся к позиционируемому элементу.
  - at (по умолчанию: "center")
    
    Тип: Строка
    
    Определяет, какая позиция на целевом элементе будет выровнена с позиционируемым элементом: выравнивание по "горизонтали вертикали". См. параметр my для получения подробной информации о возможных значениях. Процентные смещения относятся к целевому элементу.
  - of (по умолчанию: null)
    
    Тип: Селектор или Элемент или jQuery или Событие
    
    Элемент, относительно которого нужно позиционировать. Если вы предоставите селектор или jQuery-объект, будет использован первый соответствующий элемент. Если вы предоставите объект события, будут использованы свойства pageX и pageY. Пример: "#top-menu"
  - collision (по умолчанию: "flip")
    
    Тип: Строка
    Если позиционируемый элемент выходит за пределы окна в каком-либо направлении, переместите его в альтернативную позицию. Аналогично параметрам my и at, это принимает одно значение или пару для горизонтали/вертикали, например, "flip", "fit", "fit flip", "fit none".
    - "flip": Поворачивает элемент на противоположную сторону от целевого элемента, и проверка столкновений проводится снова, чтобы определить, поместится ли он. Используется сторона, которая позволяет отобразить большую часть элемента.
    - "fit": Сдвигает элемент от края окна.
    - "flipfit": Сначала применяется логика поворота, помещая элемент на ту сторону, которая позволяет отобразить большую часть элемента. Затем применяется логика подгонки, чтобы обеспечить максимальное отображение элемента.
    - "none": Не применять никакую проверку столкновений.
  - using (по умолчанию: null)
    
    Тип: Функция()
    
    Если указано, то фактическая установка свойств делегируется этому обратному вызову. Получает два параметра: первый — это хеш значений top и left для позиции, которая должна быть установлена, и может быть передана в .css() или .animate().
    Второй предоставляет обратную связь о позиции и размерах обоих элементов, а также вычисления их относительного положения. Как target, так и element имеют следующие свойства: element, left, top, width, height. Кроме того, есть horizontal, vertical и important, что даёт двенадцать возможных направлений, таких как { horizontal: "center", vertical: "left", important: "horizontal" }.
  - within (по умолчанию: window)
    
    Тип: Селектор или Элемент или jQuery
    
    Элемент, внутри которого необходимо позиционировать, влияя на проверку столкновений. Если вы предоставите селектор или jQuery-объект, будет использован первый соответствующий элемент.

Метод jQuery UI .position() позволяет позиционировать элемент относительно окна, документа, другого элемента или курсора/мыши, не беспокоясь о родительских смещениях.

Примечание: jQuery UI не поддерживает позиционирование скрытых элементов.

Это автономный плагин jQuery и не зависит от других компонентов jQuery UI.

Этот плагин расширяет встроенный метод jQuery .position(). Если jQuery UI не загружен, вызов метода .position() может не привести к прямой ошибке, так как метод всё ещё существует. Однако ожидаемое поведение не произойдёт.

Пример:

Простой пример использования jQuery UI Position.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>position demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <style>
  #targetElement {
    height: 200px;
    margin: 50px;
    background: #9cf;
  }
  .positionDiv {
    position: absolute;
    width: 75px;
    height: 75px;
    background: #080;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="targetElement">
  <div class="positionDiv" id="position1"></div>
  <div class="positionDiv" id="position2"></div>
  <div class="positionDiv" id="position3"></div>
  <div class="positionDiv" id="position4"></div>
</div>
 
<script>
$( "#position1" ).position({
  my: "center",
  at: "center",
  of: "#targetElement"
});
 
$( "#position2" ).position({
  my: "left top",
  at: "left top",
  of: "#targetElement"
});
 
$( "#position3" ).position({
  my: "right center",
  at: "right bottom",
  of: "#targetElement"
});
 
$( document ).mousemove(function( event ) {
  $( "#position4" ).position({
    my: "left+3 bottom-3",
    of: event,
    collision: "fit"
  });
});
</script>
 
</body>
</html>

.position( options )Возвращает: jQuery

версия добавлена: 1.8.position( options )

Пример:

Демонстрация: