¿Puedo obtener las coordenadas de un div con JQuery?

Question

la posición del div en la página varía. ¿Cómo puedo obtener la posición y desde la parte superior?

Answer 1

jQuery ('# id'). Offset()

Devuelve un objeto con las compensaciones superior e izquierdo.

http://api.jquery.com/offset/

Answer 2

Usted también puede estar interesado en la función de posición que obtiene la posición relativa de un padre offset (vs compensación que lo consigue en relación con el documento)

var position = $('#id').position(); 

http://api.jquery.com/position/

Answer 3

Entonces tienes que tener opciones. posición() o desplazamiento().

position() Básicamente similar a lo que podría usar en las propiedades superiores de CSS, izquierda.

offset() Devolverá la distancia relativa al documento. Esto considera márgenes, almohadillas y bordes.

<style> 
    .cont { 
     position: absolute; 
     top: 100px; 
     left: 100px; 
     border: solid 3px black; 
    } 
    p { 
     margin: 20px; 
     padding: 20px; 
     border: solid 2px black; 
     position: absolute; 
     top: 20px; 
     left: 20px; 
    } 
    </style> 

    <div class="cont"> 
     <p>Hello World!</p> 
    </div> 

    $('p').position() => { top: 20, left: 20 } 
    $('p').offset() => { top: 143, left : 143 } 

Observe cómo los valores de posición son los mismos que los valores CSS, y offset considera la posición de los padres, la frontera de los padres y el ('p') margen y el relleno del elemento.

http://jsfiddle.net/4wfa6/

http://docs.jquery.com/CSS