2011-08-10 5 views
5

Si tengo el siguiente marcado:de jQuery con el método de la posición

<div id="parent" style="width: 300px; height: 300px;"> 
    <div id="child" style="position: relative; left: 0; top: 0; width: 100px; height: 100px;"></div> 
</div> 

y quiero obtener la posición del niño en relación con su padre, sería la única manera de ser de la siguiente manera ?:

x = parseInt($('#child').css('left')); // returns 0 as needed 
y = parseInt($('#child').css('top')); // return 0 as needed 

Porque si hago lo siguiente:

x = $('#child').position().left; // most likely will not return 0 
y = $('#child').position().top; // most likely will not return 0 

la posición es incorrecta debido al hecho de que el método de desplazamiento hace una También agregue el margen, el relleno y el borde de los abuelos (ya sea el elemento del cuerpo con sus márgenes predeterminados o cualquier otro elemento abuelo).

Necesito obtener la posición correcta (en mi ejemplo sería 0, 0) pero sospecho que no hay ningún método en jQuery que pueda calcularlo por mí?

+2

Una nota: $ ('# child'). Css ('top') puede dar "auto" si no se especifica la parte superior explícita. –

Respuesta

7

.position() es correcto. Le dará los valores x y y relativos al elemento primario desplazado de un elemento. Su elemento #child se coloca en relación con su propio elemento primario de desplazamiento, que es <body>. Para hacer #parent su padre de desplazamiento, déle un position de relative o absolute.

<div id="parent" style="position: relative; width: 300px; height: 300px;"> 
    <div id="child" style="position: relative; left: 0; top: 0;...;"></div> 
</div> 
2

El método .position() nos permite recuperar la posición actual de un elemento relativo al origen del desplazamiento. Contraste esto con .offset(), que recupera la posición actual relativa al documento. Usar .offset()

Cuestiones relacionadas