Позиционирование DIV по координатам с помощью JavaScript

Постановка вопроса

Если требуется разместить элемент div в определённой точке экрана, следует использовать свойство position: absolute;, а также указать значения top и left. Это позволит «зафиксировать» элемент по указанным координатам в рамках ближайшего позиционированного предка. Если такого предка нет, элемент располагается относительно окна просмотра.

#targetDiv {
  position: absolute;
  top: 100px;
  left: 150px;
}

Добавив соответствующий стиль к HTML-элементу, вы получите следующий результат:

<div id="targetDiv">Текст здесь!</div>

Обратите внимание, что для правильного позиционирования родительский элемент должен иметь свойство position: relative;.

Приёмы динамического позиционирования с помощью JavaScript

Для динамического изменения положения блока div при помощи JavaScript, выберите элемент по идентификатору и измените его стилевые свойства:

function positionDiv(x, y) {
    var div = document.getElementById('targetDiv');
    div.style.position = 'absolute';
    div.style.left = x + 'px';
    div.style.top = y + 'px';
}

// И вот блок DIV перенесен:
positionDiv(150, 100);

Вы можете привязать данную функцию к событиям, например, onmousedown, что позволит перетаскивать блок div мышью:

document.getElementById('targetDiv').onmousedown = function(event) {
    positionDiv(event.clientX, event.clientY);
};

Пользователи jQuery могут наслаждаться аккуратным и лаконичным кодом:

$('#targetDiv').css({
    position: 'absolute',
    left: '150px',
    top: '100px'
});

Позиционирование элемента относительно родителя

Свойства позиционирования родительского контейнера влияют на положение вашего блока div. Если у родителя не установлены свойства position: relative;, absolute; или fixed;, то блок с абсолютным позиционированием будет ориентироваться относительно окна браузера.

.relative-container {
    position: relative;
}

Вычисление координат позиционирования

В сложных макетах для вычисления координат применяется метод getBoundingClientRect, который возвращает положение элемента относительно окна браузера:

var rect = document.getElementById('targetDiv').getBoundingClientRect();
console.log(rect.top, rect.left);

С помощью jQuery можно использовать метод offset() для определения или задания координат относительно документа.

Обеспечение плавного управления элементами

Чтобы оптимизировать производительность, сохраняйте ссылки на элементы, чтобы избежать многократного обращения к DOM:

var targetDiv = $('#targetDiv'); // Сохранено для удобства использования

Это упростит манипуляции свойствами элемента без ненужных обращений к DOM.

Применение позиционирования и внешние ресурсы

Стоит отметить, что для задания положения элементов может быть полезно свойство transform:

#targetDiv {
  transform: translate(50px, 100px);
}

Наглядный материал по изучению позиционирования в JavaScript можно найти на сайте javascript.info.

Визуализация

С помощью абсолютного позиционирования вы можете расположить ваш блок div по координатам (X=150, Y=100), что визуально выглядит так:

Для контейнера и блока div применяются следующие стили CSS:

.wall {
  position: relative;
}
.furniture {
  position: absolute;
  top: 100px;
  left: 150px;
}

С данными стилями можно достигнуть желаемого расположения элемента.

Решение сложностей и обход проблем

Напомним, что свойство z-index играет ключевую роль в правильном регулировании перекрытия элементов:

#targetDiv {
  position: absolute;
  z-index: 10;
}

В проектах с адаптивным дизайном часто используются проценты или единицы, выраженные в видовом порту (vw/vh) при абсолютном позиционировании. Для элементов, перемещающихся при прокрутке страницы, подходит свойство position: sticky;.

Работа со сложными макетами и важные нюансы

Будьте внимательны при работе со сложными макетами и учитывайте прокрутку, размеры элементов и стили предков. Динамическое обновление положения элементов при изменении размеров окна или прокрутке браузера может существенно влиять на визуальное восприятие сайта.

Полезные материалы

1. position – CSS: Cascade Style Sheets | MDN
2. Absolute Positioning Inside Relative Positioning | CSS-Tricks
3. CSS Layout – The position Property
4. minimum and maximum value of z-index? – Stack Overflow
5. transform | CSS-Tricks
6. The Z-Index CSS Property: A Comprehensive Look — Smashing Magazine
7. CSS Positioning 101 – A List Apart