(Primero disculpas al resto de la lista porque cuando envié el mensaje
originalmente omití indicar que se trataba de un off-topic. )
Hola Luis,
Gracias por contestar. Ya lo creo que es todo un tema, particularmente cuando
se trata de hacer algo que funcione de igual forma en los browser más
populares. En este caso especificar un float no me permitiría superponer un
objeto sobre otro, y z-index me ayudaría solo en el caso de que los elementos
ya se encuentren correctamente posicionados y superpuestos.
Intentaré dar un ejemplo simplificado de lo que intento lograr.
<html>
<head>
<style>
#src {
background-color:yellow;
}
#elt1 {
background-color:#ffeeff;
padding:40px;
}
#elt2 {
border:solid 30px;
padding:40px;
}
</style>
<script>
function moverAqui(dst) {
var src = document.getElementById('src');
// parche para IE para forzar hasLayout
dst.style.zoom = '1';
// esto es simplificado, ya que si el elemento se encontrara
anidado dentro de
// otros elementos posicionados habría que recorrer la jerarquia
sumando los offsets
src.style.position = 'absolute';
src.style.top = dst.offsetTop + dst.offsetParent.offsetTop + 'px';
src.style.left = dst.offsetLeft + dst.offsetParent.offsetLeft +
'px';
src.style.height = dst.clientHeight + 'px';
src.style.width = dst.clientWidth + 'px';
}
</script>
</head>
<body>
<h1 id="elt1" onclick="moverAqui(this);">Esto es un elemento cualquiera.
Haga clic aqui!</h1>
<h1 id="elt2" onclick="moverAqui(this);">Esto es otro elemento cualquiera.
Haga clic aqui!</h1>
<div id="src">ESTE ES EL ELEMENTO A POSICIONAR</div>
</body>
</html>
Haciendo clic en cualquiera de los dos elementos, 'elt1' y 'elt2', posiciona el
<div> sobre el elemento en cuestión. Como el elemento 'elt1' carece de borde,
el div cubre el area de contenido correctamente. Sin embargo, el estilo del
elemento 'elt2' indica un borde, y el div aparece en la posición incorrecta. Mi
problema es encontrar la forma de encontrar las coordenadas del 'area interior'
del elemento, por adentro del borde. No encuentro un mecanismo que me devuelva
el ancho del borde en pixels y que funcione en forma 'cross-browser'.
Por ahora encontré una alternativa que es copiar el estilo del elemento sobre
el cual se va a posicionar, de tal forma que el div tenga el mismo borde. De
esta forma el efecto visual es correcto. Pero estoy teniendo otros problemas
con esta solución así que todavía no estoy seguro si es viable.
Saludos,
Fernando Tubio
----- Original Message -----
From: Luis Farzati
To: [email protected]
Sent: Friday, December 15, 2006 6:46 PM
Subject: [puntonet] Recuperar la posicion de un elemento HTML
Hola Fernando,
La obtención de las posiciones es todo un tema, tienen ciertas reglas que
tienen que ver con la forma de renderear el elemento que tiene el browser.
Si te posteás un pequeño ejemplo del problema concreto, como para que sea más
visible, vemos cómo lo podemos encarar. Pero mi sugerencia es que, si lo que
querés es superponer un objeto, pruebes combinando el float y z-index (o
z-order?) del CSS. En mi experiencia siempre es conveniente esquivar
posicionado absoluto, en lo posible.
Saludos,
Luis
On 12/12/06, Fernando Tubio <[EMAIL PROTECTED]> wrote:
Necesito posicionar un <div> en forma absoluta de tal forma que se
superponga al area de contenido de un elemento en una página HTML, pero
estoy encontrando dificultades en hallar un mecanismo que me devuelva las
dimensiones necesarias. Puedo calcular las coordenadas del ángulo superior
izquierdo del elemento sumando los valores de offsetLeft y offsetTop de la
jerarquía de elementos contenedores, pero el resultado corresponde a las
coordenadas del borde externo del elemento. Necesito las coordenadas del
área de contenido, excluyendo bordes y padding.
Internet Explorer posee las propiedades clientLeft y clientTop que podrían
ser útiles, pero por desgracia no son estándar y no han sido implementadas
en Mozilla por ejemplo, a pesar de que este último si dispone de clientWidth
y clientHeight. Para determinar las dimensiones del borde + padding supongo
que podría usar algo similar a (offsetWidth - clientWidth) / 2, pero esto
asume que el borde y el padding son iguales en cada lado del elemento, y
esto no siempre es el caso. Los valores disponibles a partir de la propiedad
style no pueden ser usados para realizar el cálculo ya que sus unidades no
son siempre uniformes. Se podría tener por ejemplo un valor para el ancho
del borde expresado como 'thick' o '1em'. Necesito un valor expresado en
pixels.
¿Alguna sugerencia?
Saludos,
Fernando Tubio
