2011-08-10 2 views
0

Pourquoi la méthode position pas revenir [left: 100, top: 10] dans ce cas:Pourquoi la méthode de position ne renvoie pas les valeurs attendues?

<!DOCTYPE HTML> 
<html> 
<head> 
<style> 
#parent1 { 
    width: 300px; 
    height: 200px; 
    border: solid 9px pink; 
} 

#child1 { 
    position: relative; 
    left: 100px; 
    top: 10px; 
    width: 100px; 
    height: 100px; 
    border: solid 5px green; 
} 
</style> 
<script src="http://jquery-local/jquery.all.js"></script> 
<script type="text/javascript"> 
(function ($) { 
    $(document).ready(function() { 
     console.log($('#child1').position()); 
    }); 
})(jQuery); 
</script> 
</head> 
<body> 

<div id="parent1"> 
    <div id="child1"></div> 
</div> 

</body> 
</html> 

est le seul moyen d'obtenir la position via la méthode css?

+1

Qu'est-ce que * renvoie *? –

Répondre

0

Works pour moi - dans this JSFiddle, je reçois

left: 119 
top: 19 

qui représente la valeur supérieure de 10px plus la bordure 9px de l'élément environnant.

position() peut ne pas être ce que vous voulez, mais - il récupère la position relative to the offset parent. Dans ce cas, il ne fait pas de différence parce qu'il n'y a pas de parent de décalage, mais si vous voulez la position dans le document, l'utilisation .offset() à la place.

0

Pour moi, il retourne: [117, 27]. Tout d'abord, parce que la position de l'enfant est relative au parent, les coordonnées de l'enfant sont seulement relatives à celles du parent. Cela signifie que tout positionnement du parent, tel que la marge du corps par défaut, est ajouté au positionnement de l'enfant. En outre, la bordure du parent, un autre 9 px, est ajoutée. Si vous définissez la marge du corps sur 0, la position de l'enfant est [109, 19] :)

Questions connexes