Position Javascript deux éléments l'un sur l'autre

Question

J'ai deux divs l'un au-dessus de l'autre. Le second sur est absolument placé en dessous (div absolu à l'intérieur d'un div relatif).

Je souhaite déplacer le second div au-dessus de l'autre div, de sorte qu'il apparaisse au milieu.

La procédure pour cela est de définir le style.top de DIV2 pour être le même que DIV1, cela devrait en théorie le positionner par-dessus. Cependant, jusqu'à présent, les tentatives ont échoué.

Le positionnement absolu fonctionne correctement, car la mise en valeurs le déplace correctement, mais je pense que je n'utilise pas la bonne manière pour obtenir les valeurs hauteur/haut de DIV1.

Des idées?

J'ai essayé ceci:

divLoading.style.top = divContent.style.top;

mais il reste où il était. Editer: Le problème n'est pas de savoir comment fonctionnent absolu/relatif mais quelles valeurs javascript sont correctes à utiliser. En utilisant DIV2.style.top = DIV2.style.top - DIV1.clientHeight le déplace vers le haut ... mais clientHeight n'est pas correct, car si DIV1 change de taille, il déplace trop DIV2 vers le haut.

Édition: offsetTop semble être zéro.

Answer 1

Un div positionné absolu à l'intérieur d'un relatif positionné, va par défaut «emprunter» sa position supérieure et gauche à partir du parent relatif. Cela signifie qu'en réglant left:0; top:0 les divs partageront la même position.

Si vous souhaitez déplacer le second div, vous devez définir un sommet négatif (c'est-à-dire top: -200px). Les propriétés supérieure et gauche sont relatives à la position de base, et non au corps (sauf si la div n'est pas dans un parent positionné, auquel cas le corps est la position de base)

Answer 2

Si div1 est positionné de manière relative, les valeurs supérieure et gauche déplaceront la div par rapport à l'endroit où elle aurait été dans le flux normal. Donc style.top = 10 le déplacerait de 10 pixels vers le bas de sa position normale. Si la position était "absolute", style.top = 10 déplacerait la div à 10 pixels du div où elle est positionnée (par exemple, un élément précédent qui avait la position: relative, ou le corps du document)