image
Inicio » Foros » CSS

Foro sobre hojas de estilo CSS

Superposicion de capas

Volver al foro | Responder | Añadir nuevo tema


De: Gustavo Coirini
Fecha: 07/10/2005
Mensaje:

Quiero colocar dos capas una encima de otra y no puedo. probé con poner a una Z= -50 y la otra Z=50 y tampoco. Ya se que con capas absolutas se puede lograr, pero yo necesito que sean relativas, ya que la página va centrada y quiero que se var asi cualquiera sea la resolucion. ¿Como apilo una capa sobre la otra?




Quizás le interese
De: PABLO
Util para: 14 personas

Fecha: 08/10/2005
Mensaje:

COMO SE DA MOVIMIENTO A UNA CAPA





De: SF
Util para: 19 personas

Fecha: 11/10/2005
Mensaje:

Gustavo,

Es necesario que utilices posiciones absolutas para las capas que debes superponer. Lo que tienes que hacer es insertarlas en un <div> contenedor que esté centrado y que tenga posición relativa, como en este ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<html>
<head>
 <title>Untitled</title>
 <style type="text/css">
  #contenedor {
   width: 90px;
   position: relative;
   margin: 0px auto; 
  }
  #capa1 {
   position: absolute;
   left: 0;
   top: 0;
   width: 90px;
   color: red;
   z-index: 2;
  }
  #capa2 {
   position: absolute;
   left: 0;
   top: 0;
   width: 90px;
   color: black;
   z-index: 1;
  }
 </style>
</head>

<body>

<div id="contenedor">
 <div id="capa1">
  sdfhsdfhsdfh<br />
  ertwtwetwre<br />
  wetwetwet
 </div>
 <div id="capa2">
  srgreghwerhr<br />
  xfgfghxfgh<br />
  xfghxfghxfg
 </div>
</div>

</body>
</html>

Verás que la capa1 está sobre la capa2. Invirtiendo los valores z-index de capa1 y capa2 lograrás lo contrario. Ah, y no olvides usar XHTML Strict como DOCTYPE.

Saludos! 





Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.