1. Node.compareDocumentPosition()

    Compares the relative position of two nodes to each other in the DOM tree.

  2. CSS Anchor Positioning

    Allows placing elements anywhere on the page relative to an "anchor element", without regard to the layout of other elements besides their containing block

  3. CSS background-position edge offsets

    Allows CSS background images to be positioned relative to the specified edge using the 3 to 4 value syntax. For example: `background-position: right 5px bottom 5px;` for positioning 5px from the bottom-right corner.

  4. CSS position:sticky

    Keeps elements positioned as "fixed" or "relative" depending on how it appears in the viewport. As a result the element is "stuck" when necessary while scrolling.

  5. Element.getBoundingClientRect()

    Method to get the size and position of an element's bounding box, relative to the viewport.

  6. Element.insertAdjacentHTML()

    Inserts a string of HTML into a specified position in the DOM relative to the given element.

  7. IntersectionObserver

    API that can be used to understand the visibility and position of DOM elements relative to a containing element or to the top-level viewport. The position is delivered asynchronously and is useful for understanding the visibility of elements and implementing pre-loading and deferred loading of DOM content.

  8. css property: background-position-x: side-relative values (such as `bottom 10%`)

  9. css property: background-position-y: side-relative values (such as `bottom 10%`)

  10. css property: background-position: side-relative values (such as `bottom 10% right 20%`)

  11. css property: position: relative