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: 8 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: mit
- Created: 2021-09-05T07:35:40.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-08-24T08:27:21.000Z (over 1 year ago)
- Last Synced: 2025-04-11T05:56:06.208Z (10 months ago)
- Topics: dom, elements, placement, position, positioning
- Language: JavaScript
- Homepage: https://jsbin.com/beqosub/edit?html,css,output
- Size: 295 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
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));
}
```
