Get the position of a div/span tag

Unpacking the position property

When seeking the position of a div or span, it's essential to clarify your context and objectives. The positioning may refer to fetching relative coordinates in the viewport, or determining an absolute position across the web page. Here we face the nuances of element.offsetTop, element.offsetLeft, element.offsetWidth, and element.offsetHeight, which provide dimensions and positions relative to the element's offset parent.

Positioning in a scrolling context

In web development, the concept of scrolling is inextricably linked to positioning. When the aim is to discover the position of an element relative to the document, you may have to combine getBoundingClientRect(), window.scrollX, and window.scrollY, to account for the page's scroll offset:

const rect = element.getBoundingClientRect();
const absoluteTop = rect.top + window.scrollY; // Here, X marks the spot. Or was it Y? 
const absoluteLeft = rect.left + window.scrollX; // Oh, it's both.


Riding the jQuery magic carpet

For jQuery users, the .offset() method simplifies the task:

const position = $('#element').offset(); // 'Concise' might as well be jQuery's middle name.
console.log(`X: ${position.left}, Y: ${position.top}`); // And voila, coordinates served hot.


This quickly returns the element's position relative to the document, further enhancing jQuery's appeal for rapid development.

Dynamic positioning: A modern necessity

In the world of dynamic content, placing a div directly below another requires understanding cumulative offsets and dimensions. Here's a specimen:

const target = document.querySelector('#targetElement');
const newPos = target.getBoundingClientRect();
const dynamicDiv = document.createElement('div'); 
document.body.appendChild(dynamicDiv);
dynamicDiv.style.position = 'absolute';
dynamicDiv.style.top = `${newPos.bottom + window.scrollY}px`;
dynamicDiv.style.left = `${newPos.left + window.scrollX}px`; // It's alive! ALIVE!


This crucial dynamic positioning technique allows elements to be rendered or repositioned on-demand, enhancing user interaction.

To the parent and beyond!

For nested elements, an accurate position relative to the page sometimes requires calculating the total offset by looping through all parent elements:

function getTotalOffset(el) {
  let left = 0;
  let top = 0;
  while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    left += el.offsetLeft - el.scrollLeft;
    top += el.offsetTop - el.scrollTop;
    el = el.offsetParent; // Up, up, and away!
  }
  return { top, left };
}


This function caters to all potential parent elements, ensuring accuracy even in complex DOM structures.

Quirks and considerations of element positioning

Dynamic content: Modern web pages aren't static, and elements may be added, removed, or altered. Event listeners or mutation observers can track such changes and adjust positions accordingly.

Responsiveness: Check whether your positioning strategies tolerate various screen sizes and orientations, especially if you're handling fixed or absolute positioning.

Layout thrashing: Reduce reflows and repaints by batching your DOM reads and writes. Some DOM operations can cause page reflow, impacting overall performance. For frequent updates or animations, utilize requestAnimationFrame().