posicionar capas una encima de otra

molinillo · #1 (**permalink**) 30/11/2011, 05:42

Buenas, tengo el típico problema con z-index, la verdad que no se si mi problema es de css, igual es más de html y de como está maquetada la web.
Tengo un fondo en el body que quiero que se vea por encima de cualquier otro elemento de la web.(típico banner en los laterales del contenido de la web)

El fondo lo saco alrededor del contenedor principal, por lo que no tenia ese problema en un principio.
Pero se cambió el diseño de la web y un elemento de esta sale del contenedor principal así que se coloca sobre la imagen de fondo del body.

resumiendo , la parte que nos afecta sería así.

Código HTML:

<body>
<div class="menu">
</div>
</body>

Código HTML:

body {
	background: url("../images/fondo-imagen.jpg") no-repeat fixed center center transparent;
	margin: 0px;
	padding: 0px;
	color: #454545;
	position:relative;
	z-index:900;
}
.menu{
   width:100%;
   height:130px; 
   padding:0 auto;
   margin: 0 auto;
   z-index:-10; 
   background-color:#E0E0E0; 
   float:left; 
   text-align:center;
}

El mayor problema es q posicionar menú significaria rehacer casi todo el DOOM, de todas formas he provado:
position:absolute; en menu, no funciona.
position:relative; en menu, tpc funciona.
position:absolute; en body

y he convinado las 4 opciones.

Alguna idea?

emprear · #2 (**permalink**) 30/11/2011, 08:50

@molinillo
¿un fondo del body que se vea por sobre "todos los elementos restantes de la página" ?
El concepto no me cierra.

¿el típico problema de z-index?
¿Cual es el típico problema de z-indez?

por que no hacés una captura de como debería verse.

Saludos

BanNsS1 · #3 (**permalink**) 30/11/2011, 09:19

Cita:

Tengo un fondo en el body que quiero que se vea por encima de cualquier otro elemento de la web.

Cita:

Cita:

div#fondo{
position:fixed; /*En caso de que lo quieras fijo*/
background-image:url('images/bg.jpg') no-repeat transparent;
width:100%;
height:100%;
z-index:100; /*Evitar tener algun elemento con z-index superior*/
}

No sé que necesidad hay con ponerlo en el body.

El resto no te entiendo:
el típico problema de z-index

molinillo · #4 (**permalink**) 30/11/2011, 09:52

uffff, me he explicado fatal por intentar explicarme bien.

olvidaros de todo lo que he dicho.

contestandoos:
para mi el problema con z-index siempre lo he tenido con los positions, por eso en este caso he probado añadiendole position absolute a ambos, que siempre me había funcionado y no me ha funcionado.

con el fondo me referia a un fondo como hay por ejemplo en el AS ,en el marca o en los periodicos como el pais o el abc, un fondo lateral fijo alrededor del contenido.

y el fondo estaba ya en el body antes de que me digeran de modificar la página(que yo no había hecho)

de todas formas y aunque no me hayais netendido por que me he explicado fatal, me habeis dado una idea que ha funcionado, he sacado el fondo del body y lo he puesto en un div aparte con absolute y solucionado.

Así que gracias de todas formas =)

BanNsS1 · #5 (**permalink**) 01/12/2011, 20:04

Lo que tú dices (del diario AS en el que me he fijado) es un fondo situado en el <body>. No es que estén dos imágenes en los laterales sino que es una imagen completa situada en el body centrada para resoluciones superiores a 1024 x 768.
Eso sí, la imagen tiene que ser bastante gande. La del diario AS es de 1680x1081.