Позиционирование 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)
, что визуально выглядит так:
0 | 50 | 100 | 150 | 200 | |
---|---|---|---|---|---|
0 | |||||
50 | |||||
100 | [🛋️] | ||||
150 | |||||
200 |
Для контейнера и блока div
применяются следующие стили CSS:
.wall {
position: relative;
}
.furniture {
position: absolute;
top: 100px;
left: 150px;
}
С данными стилями можно достигнуть желаемого расположения элемента.
Решение сложностей и обход проблем
Напомним, что свойство z-index
играет ключевую роль в правильном регулировании перекрытия элементов:
#targetDiv {
position: absolute;
z-index: 10;
}
В проектах с адаптивным дизайном часто используются проценты или единицы, выраженные в видовом порту (vw/vh) при абсолютном позиционировании. Для элементов, перемещающихся при прокрутке страницы, подходит свойство position: sticky;
.
Работа со сложными макетами и важные нюансы
Будьте внимательны при работе со сложными макетами и учитывайте прокрутку, размеры элементов и стили предков. Динамическое обновление положения элементов при изменении размеров окна или прокрутке браузера может существенно влиять на визуальное восприятие сайта.
Полезные материалы
- position – CSS: Cascade Style Sheets | MDN
- Absolute Positioning Inside Relative Positioning | CSS-Tricks
- CSS Layout – The position Property
- minimum and maximum value of z-index? – Stack Overflow
- transform | CSS-Tricks
- The Z-Index CSS Property: A Comprehensive Look — Smashing Magazine
- CSS Positioning 101 – A List Apart