Az offsetParent tulajdonság

Az offsetParent tulajdonság a legközelebbi szülő elemet tartalmazza, amelyhez képest az elem pozicionálása történik. Ez vagy a legközelebbi szülő elem lesz, amelynek CSS position tulajdonsága nem static, vagy a body tag, ha nincs ilyen pozicionálású szülő elem.

Szintaxis

elem.offsetParent;

Példa

Keressük meg azt a szülő elemet, amelynek position tulajdonsága nem static:

<div id="parent3">
	<div id="parent2" style="position: relative">
		<div id="parent1">
			<p id="elem">szöveg</p>
		</div>
	</div>
</div>

let elem = document.querySelector('#elem');
console.log(elem.offsetParent.id);

A kód végrehajtásának eredménye:

'parent2'

Példa

Ha a szülő elemek között nincs pozicionálás, akkor az offsetParent a body-t tartalmazza:

<div>
	<p id="elem">szöveg</p>
</div>

let elem = document.querySelector('#elem');
console.log(elem.offsetParent.tagName);

A kód végrehajtásának eredménye:

'BODY'

Lásd még

a offsetParent tulajdonság,
amely a pozicionálással rendelkező szülőt tartalmazza
a offsetTop tulajdonság,
amely az elem felüli eltolását tartalmazza
a offsetLeft tulajdonság,
amely az elem bal oldali eltolását tartalmazza
a getBoundingClientRect metódus,
amely megkeresi az elem eltolását