https://github.com/yaireo/position

Position a DOM element at a certain X,Y or next to another element
https://github.com/yaireo/position

dom elements placement position positioning

Last synced: 3 months ago
JSON representation

Position a DOM element at a certain X,Y or next to another element

• Host: GitHub
• URL: https://github.com/yaireo/position
• Owner: yairEO
• License: agpl-3.0
• Created: 2021-09-05T07:35:40.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2023-10-17T07:23:26.000Z (over 1 year ago)
• Last Synced: 2024-05-21T13:06:45.058Z (8 months ago)
• Topics: dom, elements, placement, position, positioning
• Language: JavaScript
• Homepage: https://jsbin.com/beqosub/edit?html,css,output
• Size: 290 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  

  



  

      

  

  

  





  Position DOM element at X,Y or next to another element



## Install

```bash

npm i @yaireo/position -S

```

### UMD file link:

    https://unpkg.com/@yaireo/position

## Example

```js

import position from '@yaireo/position'

position({

  // the element wished to be positioned in a certain place

  target: targetElement,

  // reference DOM element or an Object like so: {x:10, y:20}

  ref: refElement,

  // [optional] default target plaement string, relative to the ref

  // first string value is horizontal and then vertical placement. Examples:

  // 'left center', 'right below', 'center center'

  placement:'center above',

  // [optional] distance from reference element

  offset: [20],

  // [optional] by default the positioning updates within a RequestAnimationFrame callback,

  //but this can cause painting delays when resizing or scrolling fast.

  useRaf: false,

})

```

This scripts places an element next to another element (at a certain prefered relative place).

If you want to update the targer's position (relative to its referece node) when the page scrolls or resizes

I advice adding observers:

```js

const observerCallback = () => position({ target:targetElement, ref:refElement })

// create observers instances

const resizeObserver = new ResizeObserver(observerCallback)

const intersectionObserver = new IntersectionObserver(observerCallback, {root:document, threshold:1})

// start observing (using the instances created above)

resizeObserver.observe(document.body)

intersectionObserver.observe(targetElement)

```

## CSS

This script adds *CSS variables* (custom properties) on the *target* element:

| CSS Variable        |

| ------------------- |

| `pos-left`          |

| `pos-top`           |

| `pos-target-width`  |

| `pos-target-height` |

| `pos-ref-width`     |

| `pos-ref-height`    |

| `pos-ref-left`      |

| `pos-ref-top`       |

| `window-scroll-y`   |

| `window-scroll-x'`  |

Using the above mix of variables, write this CSS in your code to position the target:

```css

[positioned]{

  --x: calc(var(--pos-left) + var(--window-scroll-x));

  --y: calc(var(--pos-top) + var(--window-scroll-y));

  position: absolute;

  z-index: 999999;

  top: 0;

  left: 0;

  transform: translate(calc(var(--x) * 1px),

                       calc(var(--y) * 1px));

}

```