Position: absolute -> Position : fixed

[SoutlinK]

Hola gente, necesito vuestra ayuda.

Tengo el siguiente problema.

Tengo una imagen, dentro de una web, cuya posicion desconozco completamente, y necesito crear la misma imagen (clonarla) exactamente en la misma posicion en la que esta, pero con position fixed.

E conseguido clonarla y posicionarla donde yo quiero, pero con position absolute, y cuando quiero ponerle posicion fixed, desaparece.

Segun tengo entendido el position absolute utiliza las cordenadas el contenedor, y position fixed necesita las cordenadas de la ventana.

Hay alguna forma de conseguir lo que pretendo hacer?

Gracias de antemano

[Panino5001]

Quizá te sirva esta función para obtener las coordenadas:

Código PHP:

  function getElementPosition(elemID) {
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
var offsetTop = 0;
while (offsetTrail) {
offsetLeft += offsetTrail.offsetLeft;
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
if (navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined" && navigator.appName=="Microsoft Internet Explorer" ) {
offsetLeft += parseInt(document.body.leftMargin);
offsetTop += parseInt(document.body.topMargin);
}
return {left:offsetLeft, top:offsetTop};
}
//ejemplo left de elemento con id="pepe": alert(getElementPosition('pepe').left); 
   

[SoutlinK]

Pues no no me sirve.

Pero creo que puedo atacar mi problema desde otro frente.

Sería posible obtener las cordenadas de una imagen respecto de la posicion de la ventana??

Lo explico mejor con una imagen



Necesito saber la distancia de al menos 2 flechas.

Izquierda o derecha
y
Arriba o abajo

Gracias de antemano

[Panino5001]

Eso es precisamente lo que hace la función que te pasé.

[SoutlinK]

Pues me devuelve cordenadas erroneas :S

[Panino5001]

Raro... Porqué no subes un ejemplo para que lo miremos.

[SoutlinK]

Bueno me rectifico a mi mismo, devuelve cordenadas validas, pero no se por que.

Al poner position absolute, funciona perfectamente, pero al foner position fixed, no me funciona.

Y utilizando el firebug, el elemento si existe y esta en el sitio adecuado, pero no aparece.

Alguna teoria?

[SoutlinK]

Iniciado por Panino5001

Raro... Porqué no subes un ejemplo para que lo miremos.

Ahora subiré uno

[SoutlinK]

Me pasa algo curioso.

En una página vacia, completamente nueva, creada para la ocasión si funciona, en cambio en la página en la cual necesito el codigo no funciona.

Y no puedo subir la pagina, por que forma parte de un foro, es decir que necesitaría subir todo el foro xDD.

Alguna idea de lo que puede ser??

E pensado que igual era el z-index, pero lo e puesto a 1000 y tampoco funciona.

Ideas?

[David]

No es necesario que subas todo el foro, solo necesitas subir el HTML generado (deduciendo que el foro esté hecho en PHP) que genera ese efecto "curioso".

[buzu]

Si en la pagina nueva funciona, lo mas probable es que haya código basura, remanente de algunas practicas que hayas estado haciendo, o código que no es basura pero que de igual manera interfiera con el script que quieres hacer. Por cierto, por que necesitas que sea a fuerza fixed?

[SoutlinK]

Iniciado por buzu

Si en la pagina nueva funciona, lo mas probable es que haya código basura, remanente de algunas practicas que hayas estado haciendo, o código que no es basura pero que de igual manera interfiera con el script que quieres hacer. Por cierto, por que necesitas que sea a fuerza fixed?

Por que necesito que estea centrado inclusi si se hace scroll.

E estado haciendo unas pruebas, y e concretado el problema, a lo siguiente.

Si por ejemplo tengo una imagen, cuyo valor css de position es el por defecto (que no se cual es), y pongo un div, justo encima de la imagen, con position: fixed por alguna razon no se muestra.

En cambio, si le pongo position absolute, si funciona.

y no lo entiendo.

igual si me contestais a esta pregunta, me contesto yo solo.

Es lo mismo

Código HTML:

<div id="prueba" style="position: absolute; z-index: 1000; top: 0px; left: 0px; margin-top: 976px; margin-left: 425px; width: 800px; height: 600px; background-color: rgb(255, 255, 255);"/> 

que esto otro??

Código HTML:

<div id="prueba" style="position: fixed; z-index: 1000; top: 0px; left: 0px; margin-top: 976px; margin-left: 425px; width: 800px; height: 600px; background-color: rgb(255, 255, 255);"/> 

Independientemente de que uno sea position: fixed y el otro position: absolute, como podeis ver las cordenadas son las mismas.

Puede ser, que las cordenadas cambien de fixed a absolute???

[Panino5001]

Tendría que investigarlo bien, pero porqué no iniciás con position absolute o relative, averiguás las coordenadas y luego le cambiás el estilo a fixed, todo en tiempo de ejecución?

[SoutlinK]

Iniciado por Panino5001

Tendría que investigarlo bien, pero porqué no iniciás con position absolute o relative, averiguás las coordenadas y luego le cambiás el estilo a fixed, todo en tiempo de ejecución?

Eso ya lo e echo, y en cuento lo paso a fixed, desapareze.

[SoutlinK]

Bueno definitivamente, e cambiado de opinion acerca de mi script, ya no me complico la vida, mas con el position fixed, pero es que ahroa tengo otro problema.

Como centro un elemento con position absolute, al centro de la ventana, si esta tiene scroll???

Poniendo los siguientes valores css, se me centra, si la página esta en lo mas alto del scroll:

Código HTML:

width: 800px;
height: 600px;
top: 50%;
left: 50%;
margin-left: -300px; // la mitad de la anchura
margin-top: -400px; // la mitad de la altura

[SoutlinK]

Pues buscando por este mismo foro, e encontrado la solución, que fue posteada por el propio Panino.

Gracias a todos

http://www.forosdelweb.com/f13/centr...lmente-549444/