Div encima de una imagen usando z-index

gabyfornia · #1 (**permalink**) 16/07/2011, 11:30

Hola amigos, como estan, consulta: tengo una pagina donde una imagen ocupa todo la pantalla y la cual se redimensiona con un codigo en css.

Ahora bien quiero insertar un div encima en el cuál dentro tendrá un slide show, puedo hacerlo con el AP DIV, hasta ahi todo bien.

El punto es saber que código utilizar para que ese div quede fijo y cuando se achique la ventana o bien se utilice un monitor de otra resolución (el mío es un widescreen de 22") ese div que contiene el slide se mantenga en el lugar sin que se mueva. He intentando con los margenes, etc, pero nada!

Alguien tiene idea como lograrlo? Gracias
Agradecería pronta respuesta si alguien sabe de que forma hacerlo!

gabyfornia · #2 (**permalink**) 16/07/2011, 11:32

Aclaración, la imagen no esta siendo utilizada como background, sino como una imagen inserta en la página, ya que de otro modo se distorsiona! Igual si asi fuera, el problema es el mismo con el div! ya que lo he probado! gracias de nuevo!

yoniti7784 · #3 (**permalink**) 16/07/2011, 12:49

ya intentaste ponerlo en porcentajes?
width:porcentaje%;
height:porcenjate%;

Si los utilizas puedes ver identicas las paginas con diferente monitor, resolucion.
Has pruebas aumentando el zoom al maximo y disminuyendolo al maximo. para que veas que funciona en varias resoluciones.

gabyfornia · #4 (**permalink**) 16/07/2011, 12:53

Si, eso esta clarisimo y asi lo he hecho! pero el problema es con el div que va encima, centrado en la página, que deseo que no se mueva de su lugar cuando agrando o achico la ventana! esa es mi duda, el posicionamiento del div que va por encima de la imagen!

ArturoGallegos · #5 (**permalink**) 16/07/2011, 14:04

un ejemplo rapido y burdo seria

Código HTML:

Ver original<body>
    <img src="#" id="Background" />
    <div id="Sitio">
        <div id="Content">Tu contenido</div>
    </div>
</body>

Código CSS:

Ver originalbody,#Background,#Sitio{width: 100%;height:100%;overflow:hidden;margin:0;padding:0;}
#Sitio{overflow:auto;}
#Content{width:800px;margin:auto;}

Nota: no olvides tener un doctype valido