HTMLElement.offsetParent — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLElement.offsetParent

Beschreibung

offsetParent gibt das Element zurück, von dem aus offsetTop und offsetLeft gemessen werden. In der Regel ist das der nächstgelegene Vorfahre, dessen berechnete position nicht static ist, also relative, absolute, fixed oder sticky. Gibt es keinen solchen Vorfahren, liefert die Eigenschaft das <body>-Element.

Ist das Element selbst nicht positioniert, zählen auch die Tabellenelemente <td>, <th> und <table> als offsetParent. Außerdem werden Vorfahren mit einem transform, einem filter oder will-change: transform in modernen Browsern zum Bezugselement, weil sie einen neuen Enthaltungsblock (containing block) bilden.

In folgenden Fällen ist der Wert null:

Das Element oder einer seiner Vorfahren hat display: none.
Das Element hat selbst position: fixed (Ausnahme: Firefox gibt hier <body> zurück).
Das Element ist <body> oder <html>.
Das Element hängt nicht im Dokument.

Sinnvoll ist die Eigenschaft vor allem, um die absolute Position eines Elements über alle offsetParent-Stufen aufzusummieren, um Tooltips und Popovers relativ zu einem Container auszurichten und um schnell zu prüfen, ob ein Element überhaupt dargestellt wird.

Rückgabewert

Typ

Element | null

Beschreibung

Das nächstgelegene positionierte Vorfahrenelement (bzw. <td>, <th>, <table> oder <body>) oder null, wenn das Element nicht gerendert wird oder fest positioniert ist.

Beispiele

Bezugselement ermitteln

// HTML: <div id="box" style="position: relative"><span id="label">Hallo</span></div>
const label = document.getElementById('label');
console.log(label.offsetParent.id);
console.log(label.offsetTop, label.offsetLeft); // relativ zu #box

box 0 0

Absolute Seitenposition über die offsetParent-Kette berechnen

const getPagePosition = (el) => {
  let top = 0;
  let left = 0;
  let current = el;
  while (current) {
    top += current.offsetTop;
    left += current.offsetLeft;
    current = current.offsetParent;
  }
  return { top, left };
};

const pos = getPagePosition(document.querySelector('#target'));
console.log(`Ziel liegt bei ${pos.top}px / ${pos.left}px`);

Ziel liegt bei 840px / 120px

Prüfen, ob ein Element sichtbar gerendert wird

// Schnelltest: null bedeutet display:none (auch bei einem Vorfahren)
const isRendered = (el) =>
  el.offsetParent !== null || getComputedStyle(el).position === 'fixed';

const menu = document.querySelector('.dropdown-menu');
menu.style.display = 'none';
console.log(isRendered(menu));
menu.style.display = 'block';
console.log(isRendered(menu));

false true

Tooltip relativ zum offsetParent eines Buttons positionieren

const button = document.querySelector('#hilfe');
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.textContent = 'Klicken für Hilfe';
tooltip.style.position = 'absolute';

// Tooltip im selben Bezugssystem wie der Button einhängen
const container = button.offsetParent ?? document.body;
container.appendChild(tooltip);
tooltip.style.top = `${button.offsetTop + button.offsetHeight + 4}px`;
tooltip.style.left = `${button.offsetLeft}px`;

// Wichtig · Fallstricke

Nur auf HTMLElement: SVG-Elemente haben keine offsetParent-Eigenschaft (der Wert ist undefined). Für SVG nutzt man getBoundingClientRect().
Unterschiede bei position: fixed: Chrome, Safari und Edge geben null zurück, Firefox dagegen <body>. Deshalb taugt offsetParent === null nicht als alleinige Sichtbarkeitsprüfung. Moderne Alternative: element.checkVisibility().
Performance: Wer offsetParent liest, erzwingt eine synchrone Layoutberechnung (Reflow). Wechseln sich Lese- und Schreibzugriffe in Schleifen ab, kann das zu Layout-Thrashing führen, also zu ständig neu berechnetem Layout.
Transformationen: transform, scale, rotate oder Scroll-Positionen stecken nicht in den Offset-Werten. Für die tatsächliche Position auf dem Bildschirm ist getBoundingClientRect() zuverlässiger.
Shadow DOM: Liegt der positionierte Vorfahre in einem geschlossenen Shadow-Tree, geben Browser ihn nicht preis. Stattdessen kommt der nächste Vorfahre außerhalb des Shadow-Trees zurück.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert und wirft im Strict Mode einen TypeError.

Siehe auch

HTMLElement.offsetTop HTMLElement.offsetLeft HTMLElement.offsetWidth HTMLElement.offsetHeight Element.getBoundingClientRect() Element.checkVisibility() HTMLTimeElement.dateTime