¿Cómo encontrar la posición "relativa" de un elemento en su elemento padre? O: ¿Cómo encontrar al Sr. Azul?

Tengo básicamente 2 elementos div. El primero es un contenedor desplazable y el segundo es un elemento que se coloca en el contenedor. Me gustaría encontrar la posición y en relación con el contenedor de desplazamiento. Envolví todo en una pieza de código de ejemplo titulado ¿Cómo encontrar al Sr. Azul?¿Cómo encontrar la posición "relativa" de un elemento en su elemento padre? O: ¿Cómo encontrar al Sr. Azul?

<div style="height:100px; border:solid 1px black; overflow-y:scroll;"> 
    Please scroll down... 
    <br/> 
    <div style="height:400px;"> 
    </div> 
    <br/> 
    <div id="MrBlue" style="height:20px; background-color:blue; color:white"> 
     Mr. Blue 
    </div> 
</div>

Así que me gustaría una declaración JavaScript/jQuery que alerta al vertical de la posición de laMr. Blue. divrelativo al contenedor desplazable.

Ps. Si quieres 'tocar el violín' con el Sr. Azul, marque http://jsfiddle.net/KeesCBakker/Qjr5q/.

Fuente

2011-03-16 Kees C. Bakker

cuidado para traer Mr Blue a jsFiddle por lo todos podemos festejar con él? – corroded

Por supuesto: http://jsfiddle.net/KeesCBakker/Qjr5q/ –

Si usted puede agregar CSS position: relative al contenedor de envasado/desplazándose entonces es tan simple como

document.getElementById('MrBlue').offsetTop

y el ejemplo jsFiddle http://jsfiddle.net/eU3pN/2/

Fuente

2011-03-16 11:02:52

Ooo, no es JQuery, pero sí;) $ (# MrBlue) .position.top() - Escribe menos, haz más;) –

escribe menos, haz más - cierto - pero lleva más tiempo y potencia de CPU - a veces puedes No se lo puede permitir, especialmente si usted prueba sus sitios web pesados de jQuery en PCs/laptops o netbooks antiguas, se daría cuenta de que jquery no está cerca cuando se trata de velocidad en comparación con JS nativo. Simplemente tiene que manejar escenarios óptimos y peores que lo hacen más lento en todos los casos posibles. Y a pesar de que es mi herramienta favorita para el prototipado rápido, siempre intento poner tanto código nativo como pueda si sé que el rendimiento en las configuraciones/navegadores más antiguos se beneficiará de eso. –

Veo su punto: supongo que los archivos fuente de JQuery traducirán '$ (# MrBlue) .position.top()' en 'document.getElementById ('MrBlue'). OffsetTop' o algo similar de todos modos –

puede utilizar jQuery position

$(document).ready(function() { 
    alert($("#MrBlue").position().top); 
});

ver esto jsfiddle

Actualización: de contenedores debe tener position:relative; de lo contrario no lo puedo trabajar

ver este jsfiddle

Fuente

2011-03-16 10:59:00 felixsigl

Esto no funciona. Si agrega algunos ingresa antes del div externo, obtendrá un resultado diferente. –

use position: relative; en el contenedor div entonces funciona. – felixsigl

Perfecto ... funciona a la perfección. ¡El Sr. Blue te lo agradece! ¿Puedes incluir esto en tu respuesta (para las generaciones futuras)? –

.position de jQuery actualizado ()

El método .position() nos permite recuperar la posición actual de un elemento con respecto a la matriz de desplazamiento. Contraste esto con .offset(), que recupera la posición actual relativa al documento. Cuando coloca un nuevo elemento cerca de otro uno y dentro del mismo que contiene el elemento DOM , .position() es el más útil.

Devuelve un objeto que contiene las propiedades superior e izquierda.

http://jqapi.com/#p=position

Fuente

2011-03-16 11:01:51

¿Puede agregar algún código a jsFiddle para mostrar cómo funcionaría su respuesta? jsfiddle.net/KeesCBakker/Qjr5q –

http://jsfiddle.net/Qjr5q/2/ –

Lo que faltaba en el el ejemplo fue que el contenedor de desplazamiento necesitaba ser relativo. –

¿Cómo encontrar la posición "relativa" de un elemento en su elemento padre? O: ¿Cómo encontrar al Sr. Azul?

Respuesta

Cuestiones relacionadas