jQuery posición() superiores devuelve 0 en lugar de un valor real

De acuerdo con la documentación oficial de jQuery, esta función debe:jQuery posición() superiores devuelve 0 en lugar de un valor real

"Obtener las coordenadas actuales del primer elemento en el conjunto de elementos emparejados, en relación con el offset parent. "

Se espera que el siguiente código devuelva el valor 51, pero devuelve el valor 0. ¿Alguien podría proporcionar información como también por qué? Gracias por adelantado.

Sé que la adición de css (top: xx) funciona, si es así, ¿eso significa que la posición() solo funciona para el caso en que el elemento tiene la propiedad css de la parte superior?

<html> 

<head> 
    <style type="text/css"> 
     .outer 
     { 
      width:200px; 
      height:200px; 
      overflow-y:auto; 
      border:1px dotted grey; 
      position:absolute; 
     } 
     .inner 
     { 
      width:50px; 
      height:50px; 
      margin-top: 50px; 
      border:1px solid red; 
     } 
    </style> 
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
    <script type="text/javascript""> 

     $(document).ready(function() { 
      $('.inner').mousedown(function (e) { 
       alert($(this).position().top); 
      }) 
     }) 
    </script> 
</head> 
<body> 

    <div class="outer"> 
     <div class="inner"></div> 
    </div> 
</body> 
</html>

Fuente

2012-07-18 Ley

uso desplazamiento(). Top http://jsfiddle.net/XpynZ/ – sofl

@sofl esto es relativo al documento, quiero el obtener la longitud entre div div exterior y interior, es decir, que necesita una posición de uso en lugar de una compensación. – Ley

La descripción de la API es correcta. El elemento interno tiene el valor de propiedad de CSS predeterminado (inicial) de top:auto. Hay un margin-top:50px que como sabe está dando la impresión de que el elemento interno es 50px desde la parte superior, pero este no es el caso. jQuery devolverá position().top = 0 ya que la parte superior del elemento realmente es 0px del elemento padre.

para jQuery para devolver un valor esperado usando la función .position() que se necesita para posicionar el interior <div> relativamente (o absoluta en función de sus necesidades) a los padres y proporcionar un valor superior y retire la propiedad margin-top, por ejemplo:

.inner { 
    position:relative; 
    top:50px; 
    ... 
}

Fuente

2012-07-18 13:45:29 andyb

buena explicación. muy fácil de entender Gracias. – Ley

Se está alertando a 0, que es 100% correcto, porque la parte superior sólo devuelve los valores de otro tipo que 0 cuando se está usando para posicionar un elemento pero aquí está utilizando márgenes y el relleno de elemento de posicionar de manera usarlos para obtener distance.Like la parte superior

$(document).ready(function() { 
      $('.inner').mousedown(function (e) { 
       alert($(this).css("margin-top")); 
      }) 
     })

Si desea utilizar la posición y luego hacerlo

.inner 
     { position:absolute; 
      width:50px; 
      height:50px; 
      top: 50px; 
      border:1px solid red; 
     }

y luego hacer su normal de codificación

Fuente

2012-07-18 12:31:56 bugwheels94

gracias. Sé que este camino es factible, pero no es lo que quiero. Solo quiero usar position(). – Ley

¿Por qué mi comprensión hacia la API es incorrecta? – Ley

Sé que la adición de css (top: xx) funciona, si es así, ¿eso significa que la posición() solo funciona para el caso en que el elemento tiene la propiedad css de arriba? – Ley

Es esto ayudándole ?:

document.getElementById("innerDiv").offsetTop;

O utilizar el método jQuery Offset:

El .offset() método nos permite recuperar la posición actual de un elemento con respecto al el documento. Contraste esto con .position(), que recupera la posición actual relativa al origen del desplazamiento. Al posicionar un nuevo elemento encima de uno existente para la manipulación global (en particular, para implementar el método de arrastrar y soltar), .offset() es el más útil.

Fuente

2012-07-18 12:34:04 ThdK

Estoy usando firefox 13.0.1 – Ley

Ok, sry, fui rápido con mi suposición, estoy simulando tu problema ahora en firefox y realmente es 0 en lugar de un valor. Estoy buscando lo que podría ser. – ThdK

Ankit tiene razón, consulte este ejemplo de trabajo con posicionamiento relativo en lugar de margen: http://jsfiddle.net/HPSLm/ – ThdK

jQuery posición() superiores devuelve 0 en lugar de un valor real

Respuesta

Cuestiones relacionadas