enviar capa absoluta al fondo...

Snd234 · #1 (**permalink**) 26/12/2007, 21:42

Hola, queria consultar si es posible enviar una capa con posicion absoluta al fondo. Mejor lo explico con un ejemplo...

http://www.kibit.cl/ejemplos/css/tags.html

En esa pagina tengo el siguiente codigo:

Código:

<div id="tags">
    <div id="tags_main">
        <div id="tags_top"></div>
        <div id="tags_content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    <div id="tags_bottom"></div>
</div>

Y el siguiente estilo:

Código:

#tags {
    width: 730px;
    margin: 0px auto;
}

#tags_content {
    padding: 0px 16px;
}

#tags_top {
    height: 32px;
    width: 730px;
    background-image: url(images/tags_top_bg.png);
    background-position: top;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 2;
}

#tags_main {
    background-image: url(images/tags_main_bg.png);
    background-position: top;
    background-repeat: repeat-y;
}

#tags_bottom {
    height: 10px;
    background-image: url(images/tags_bottom_bg.png);
    background-position: center;
    background-repeat: no-repeat;
}

El problema, es que quiero enviar la capa #tags_top al fondo para que el texto que tiene la capa #tags_content se vea por encima, y de esa forma el degrado quede siempre arriba y el texto comienze desde alli...

Es posible solucionarlo?

caricatos · #2 (**permalink**) 27/12/2007, 01:46

Hola:

Al ponerle un z-index superior, estás poniendo la capa al frente... y por la distribución de tus capas, simplemente bastaría quitando ese estilo...

Pruébalo y nos cuentas.

Saludos

Snd234 · #3 (**permalink**) 27/12/2007, 09:53

Pero el z-index se aplica en caso de bajer 2 o mas capas con posicion absoluta, en este caso solo tengo una...

webosiris · #4 (**permalink**) 27/12/2007, 14:20

Cita:

Iniciado por Snd234

Pero el z-index se aplica en caso de bajer 2 o mas capas

no, todos los elementos tienen z-index, aún aquellos en donde no los tienen explícito el navegador aplica un z-index auto, que es igual al z-index del elemento padre.

ponle un z-index negativo y ya estaría (aunque igual creo que usar 5 capas para lo que estas haciendo es complicarse demasiado)...

Snd234 · #5 (**permalink**) 27/12/2007, 15:19

Es que... de que otra forma se podria hacer?
La idea es que el contenido cresca y el fondo se siga manteniendo, el color y borde de la imagen...

Su fuera el contenido fijo solo podria una capa y la imagen de fondo y listo pero en este caso es dinamico...

juaniquillo · #6 (**permalink**) 27/12/2007, 17:29

El problema que tienes es algo que nunca he podido resolver, pero te puedo dar una de las alternativa de las cuales me he tenido que valer debido a ese mismo problema. Puedes usar márgenes negativos en el div del contenido. Solo tienes que cambiar estos dos classes:

Código HTML:

#tags_content {
    margin-top:-25px;
    padding: 0px 16px;
}

#tags_top {
    height: 32px;
    background-image: url(images/tags_top_bg.png);
    background-position: top;
    background-repeat: no-repeat;
}

yo le puse -25px como ejemplo pero tu puedes ponerle cuanto necesites.