Foros del Web » Creando para Internet » CSS »

(Consulta) Z-index, position y Margin

Estas en el tema de (Consulta) Z-index, position y Margin en el foro de CSS en Foros del Web. Hola. Voy a tratar de ser lo más claro posible: Se que a la propiedad z-index se le aplican valores en numeros absolutos, Ej: z-index:2; ...
  #1 (permalink)  
Antiguo 11/06/2009, 00:16
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años
Puntos: 21
(Consulta) Z-index, position y Margin

Hola.

Voy a tratar de ser lo más claro posible:

Se que a la propiedad z-index se le aplican valores en numeros absolutos, Ej: z-index:2;

Tambien se que tiene que ir acompañado de la propiedad position, absolute o relative.

Ahora bien, al poner la propiedad position y un valor en absolute o relative, tengo q definir el top y left?

Si en un div tengo margin:0 auto; para que lo centre, al poner position:relative; me lo desplaza a la izquierda (como si anulara el margin:0 auto;) como soluciono eso? es decir que se mantenga centrado?

Ahora bien, suponiendo que tengo todo OK.:
Al poner z-index para que se superpongan capas, yo quiero desplazar una capa arriba de otra: lo hago con margin con valores negativos para que un div q este abajo suba o con la propiedades top y left hago esto?

saludos.
  #2 (permalink)  
Antiguo 11/06/2009, 00:27
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años
Puntos: 21
Respuesta: (Consulta) Z-index, position y Margin

Ejemplo:

Código HTML:
<div id="head">Cabeza con titulo y barra de navegacion</div>

<div class="wrappler"></div>

<div id="cuerpo">Cuerpo con el contenido esto quiero que flote y se superponga por arriba del header unos 20px</div>

<div class="wrappler"></div>

<div id="footer">Pie de pagina</div> 
La css:

Código HTML:
#head { width:100%; height:100px; backround-color:#frf56h;}

.wrappler {clear:both; width:100%; margin:0 auto;}

#cuerpo {width:800px; min-height:650px; height:auto; overflow:hidden; position:relative; z-index:2; margin-top:-20px}

#footer{width:100%; height:50px; margin-top:20px; margin-bottom:50px; border-top: 2px #fff;}
Bueno algo asi, lo hice a ojo, no tengo editor en esta maquina.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:39.