Aprende a manejar el método position de jQuery, así como las propiedades top y left que devuelve este método.

En el siguiente tutorial veremos el manejo del método position y de qué depende el valor de las propiedades top y left; asimismo, haremos una comparación clara con el método offset, el cual suele causar confusion con position.

Al contar con elementos HTML, ocurre que para realizar animaciones, efectos, o simplemente conocer la posición de dichos elementos, necesitamos contar con sus propiedades top y left, para ello jQuery cuenta con un método llamado position, que lo conoceremos más adelante.

El método $.position(''), devuelve la posición de un elemento con respecto a su elemento padre. Este método devuelve un objeto con 2 propiedades; las posiciones top y left en píxeles.

Pero de necesitar obtener las propiedades left y top de acuerdo al documento, en lugar del método $.position('') puedes utilizar  a $.offset('') que vimos en un pasado tutorial.

See the Pen Método position jQuery by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Y como vemos las propiedades top y left, son de 10px ambas, de acuerdo a su contenedor padre, entonces es así como podremos usar a este método.

Nota: jQuery no soporta conseguir las coordenadas de posición de los elementos ocultos.

See the Pen Elementos ocultos en jQuery by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Como vemos en el ejemplo no podremos obtener las propiedades top y left de acuerdo al método position, pues jQuery no reconoce a este elemento oculto para el método establecido.

Ahora resolvamos la pregunta que necesitamos, cuál es la diferencia entre el método $.position(); y $.offset(); para esto veamos un ejemplo y veamos:

See the Pen Elementos ocultos en jQuery by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.

Como se ve demostrado en el ejemplo es así como trabajan ambos métodos y la forma en que acceden a las propiedades top y left, si quieres conocer más sobre el Método offset de jQuery

Bien en este tutorial hemos conocido otro método jQuery que te será de gran ayuda para animaciones, efectos o simplemente saber cómo acceder a sus propiedades top y left, de igual manera hemos visto cuáll es la diferencia con offset, que siempre ocurre ciertas confuciones. Me despido recordandote que cuentas con curso como JavaScript y jQuery.