position-element

A simple function for positioning one DOM element relative to another DOM element (anchor element).

Usage no npm install needed!

<script type="module">
  import positionElement from 'https://cdn.skypack.dev/position-element';
</script>

README

position-element

A simple function for positioning one DOM element relative to another DOM element (anchor element).

It is useful for implementing something like tooltips, dropdown/popups with support for these features:

  1. Automatically reposition element with best alternative placement if element renders out of browser view port.
  2. Supports 12 placements options.
  • up-left, up-center, up-right
  • down-left, down-center, down-right
  • left-top, left-middle, left-bottom
  • right-top, right-middle, right-bottom
  1. Customizable distance and offset

Example

import positionElement from 'position-element';

const config = {
  element: document.getElementById('subject'),
  anchorElement: document.getElementById('anchor'),
  preferredPlacement: 'down-center',
  distance: 10,
  alignmentOffset: 0,
  autoReposition: true,
};

positionElement(config);

Live demo

demo.html

Tips

  1. positionElement will do the measurement and set element's position: absolute, left and top style for you.
  2. However, it is important for you to set the right position style (e.g. position:relative ) for the common container of both the anchor element and the positioning element.