Discussion :

[Beginner.]

Salut,

J'ai un problème avec la propriété offsetTop...

Je me base notamment sur cet article : Measuring Element Dimension and Location with CSSOM in Windows Internet Explorer 9 (Internet Explorer).

Normalement c'est une donnée relative au parent* mais dans certains cas je constate que cette donnée est relative au "viewport" (le document html)...

* Ici : element.offsetTop il est bien dit :

topPos = element.offsetTop;

Paramètres

topPos est le nombre de pixels depuis le haut de l'élément parent.

Mais ar exemple j'ai fait ce test ici : http://jsbin.com/zawiruzawu/edit?html,css,output Normalement je devrais avoir un offsetTop de 9px pour child1 (cela correspond au padding du parent) mais j'obtiens 102px !!! Par contre quand je met le parent en position: relative j'obtiens bien 9px...

Il fallait le savoir dis donc... Y a-t-il d'autres surprises ?

Du coup je me demande si cette propriété est fiable...

Qu'en pensez-vous ?
Merci.

[Beginner.]

Ah oui ça y est je viens de comprendre : c'est une propriété relative au offsetParent et non au parent (parent peut être offsetParent si il est positionné)...

Du coup je trouve que cette propriété en sois n'est pas très intéressante (elle n'est pas exploitable sans le contexte)...

Je veux dire concrètement qu'on ne peut pas s'en servir pour obtenir la position d'un élément par rapport à son parent direct si ce dernier n'est pas positionné...

---> Du coup comment obtenir la position d'un élément quelconque par rapport à un autre élément ?
On n'utilise la méthode getBoundingClientRect() ?

[danielhagnoul]

C'est une propriété DOM 0, donc aucune norme ne s'applique et chaque navigateur fait à sa manière.

Firefox se distingue avec un "8, 14 et 20" au lieu de "8, 7 et 9" pour Chrome et Edge. (J'ai mis tous les éléments en position relative).

[Beginner.]

Ah merci.

Ah oui si cela change d'un navigateur à l'autre alors ce n'est pas fiable...

[danielhagnoul]

Pour getBoundingClientRect().top Chrome, Firefox et Edge sont d'accord sur "22, 8 et 42" !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var parent = document.getElementById("parent");
var container = document.getElementById("container");
 
function display(event) {
	console.log( parent.getBoundingClientRect().top );
	console.log( container.getBoundingClientRect().top );
	console.log( ( parent.firstElementChild ).getBoundingClientRect().top );
}
 
display();

[Beginner.]

Merci pour le test.

Oui je crois bien que cette méthode est la meilleure...

[Beginner.]

Salut,

Finalement getBoundingClientRect() déconne chez moi, j'obtiens des résultats différents entre FF et Chrome : http://jsbin.com/kukinemewo/edit?html,css,js,output
.

body :....... offsettop : 0 .....top: 8 margin : 8px padding : 7px border : 7px
container : offsettop : 54 ...top: 62 padding : 7px border : 7px
parent :..... offsettop : 7 ...top: 76 padding : 9px border : 11px
child :....... offsettop : 9 .....top: 96 border : 1px

body :....... offsettop : 0 .....top: 8 margin : padding : border :
container : offsettop : 60 ...top: 68 padding : border :
parent :..... offsettop : 7 ...top: 82 padding : border :
child :....... offsettop : 9 .....top: 102 border :

- Le top est le même pour body mais diffère de 6px pour container, parent et child...
- OffsetTop (avec position relative) est le même pour body, parent et child mais diffère de 6px pour container.

- Autre différence ! le scrollTop va de 0 à 70 avec Chrome et de 0 à 83avec FF...

Et getComputedStyle() ne fonctionnent toujours pas avec FF même en ajoutant getPropertyValue()...

Ah la la, c'est désespérant tout ça, c'est le désordre, à quoi peut-on se fier ?

Ah le CSS me dégoute de plus en plus...

[Beginner.]

Bon après quelques tests :

La différence de 6px est dû aux sauts de ligne <br> (une diff de 2px par br et 3 br ça fait 6).

On peut régler ça en fixant une police et cela réduit aussi le problème de différence de scrollTop... Il reste une différence car FF ne prend pas en compte le padding-bottom (d'ailleurs il n'apparait pas !!!)...

Et pour getComputedStyle() je ne sais toujours pas...

[Beginner.]

Et pour getComputedStyle() je ne sais toujours pas...

J'ai trouvé, avec FF on ne peut pas avoir le padding, le margin, le border... Il faut les récupérer séparément pour chaque coté, exemple :

getComputedStyle(document.body, null).getPropertyValue("margin-top");
Ou plus court :

getComputedStyle(document.body).marginTop;


http://jsbin.com/xeyezinuso/edit?js,output