Lío con z-index
5 seguidores
Buenas, estoy experimentando con los z-index pero no consigo que con los divs en relativo se superpongan, en absoluto parece que funciona, pero por cabezonería me gustaria saber por que no rula con relativo, os pongo los estilo css:
#bg {
position:relative;
width:950px;
height:300px;
background-repeat: no-repeat;
z-index: 1;
background-color: #333333;
margin: 0 auto;
}
#contenedor {
position:relative;
width:950px;
height:950px;
z-index: 3;
margin: 0 auto;
}
En teoria bg esta debajo de contenedor,...... en el html lo he estructurado así:
body
div bg
div contenedor
/body
¿donde esta el error?
kemie
Dos recursos que me son indispensables para debuggear el z-index:
-Esta es una explicación muy clara sobre los problemas de z-index en ie
-Aqui puedes jugar con diferentes contenedores, posiciones, y z-index
rmk
Gracias Kemie, lo voy a estudiar y te cuento,..... pero,..... en el html el orden que describo sería el correcto???
kemie
en teoria no necesitarias el z-index. el elemento que viene después en el código debería estar sobre los anteriores. Si tienes un ejemplo en línea lo puedo checar.
rmk
gracias kemie por tu interes,.... tengo esto: http://rmk.webcindario.com/zindex/home.html
Lo que quiero conseguir es que los textos (estan dentro de #contenedor) queden por encima de la mancha gris (#bg) la idea es poner en lugar de la masa de color un flash por ejemplo,.... He estado ojeando los links que me has referido pero nada,...... he estado haciendo pruebas y no me funciona el index,......
yosoyraro
Quieres meter todos los textos en el recuadro #bg? Porque en #contenedor está todo, texto,menu, etc.
En teoría es fácil pero no entiendo muy bien lo que necesitas... :(
pseudo
Perdón si es off-topic, pero igual te sirve de ayuda esta explicación gráfica sobre el z-index XD
Visto en: http://designyoutrust.com/2009/01/10/sexy-css-tips/
--
Behance
Portfolio
rmk
lo que busco, es que en el #bg haya un flash, o una imagen,.... y encima #contenedor con los menus, los textos y demás,.... yo lo que creo es que no me aclaro con la sintaxis de zindex y los posicionamientos absoluto o relativo,......
Buen recurso, una imagen vale más que mil lineas de código ;)
zigotica
haber empezado por ahi, si no ha cambiado la cosa, el flash "no se deja" tapar por elementos. la solucion seria poner el wmode:transparent pero por temas de rendimiento no es nada aconsejable.
yosoyraro
En esta web puedes ver un ejemplo de un fondo en flash y encima el menu y el footer. El video en flash tiene un z-index:-999 y una position:fixed. El resto nada. En tu caso, yo pondríaen #bg, position:absolute y un z-index:-999. En lo demás no pondría nada de z-index.
Ya nos dirás :)
kemie
tambien ten en cuenta que para que un flash tome el atributo z-index, tienes que usar la propiedad wmode
rmk
Pues parece que funciona como decía yosoyraro http://rmk.webcindario.com/zindex/home.html pero al parecer las rutas del flash no están bien pero en local funciona, al estar el div con el flash en absoluto se posiciona a la izquierda en lugar de centrado como me había planteado el ejercicio, pero por lo demás va de lujo, he estado leyendo por ahí y he visto que el zindex no puede tener valores negativos pero en este caso se han puesto y funciona ¿curioso no??, prometo poner el resultado con el flash bien,.....
rmk
esta arreglado lo del flash, y he centrado un div con absolute,.... http://rmk.webcindario.com/zindex/home.html creía que estaba resuelto y que era una gran victoria,..... pero he testeado la pagina en un tester multinavegadores online y el resultado es penoso, no llego al 50% del buenos resultados,.... crei que esto iva ha ser mas sencillo una pena, yo con mis conocimientos me doy por vencido,...... seguro que algún día será mas sencillo. El ejercicio prometía.