Índice

Las capas HTML:Capas

Una capa o «Layer» le permite obtener efectos de superposición entre diferentes bloques. Las propiedades de capa son las siguientes:

position: permite definir la posición de la capa en relación a los elementos ya existentes. Los valores son: static, absolute, relative, fixed. Existen cuatro valores complementarios: left, right, top y bottom.

z-index: permite definir el orden de las capas. Cuanto mayor sea el valor de z-index, mayor preferencia tendrá sobre otras capas y, por tanto, más alante se colocará en la pila.

visibility: permite hacer que una capa sea visible o no.

Este es un ejemplo de sintaxis:

... 
<STYLE type="text/css"> 
    #capa1 { 
      position:absolute; 
      width:100px; 
      height:100px; 
      z-index:0; 
      background-color: #999999; 
} 
    #capa2 { 
      position:absolute; 
      width:100px; 
      height:100px; 
      z-index:1; 
      left: 50px; 
      top: 75px; 
      background-color: #CCCCCC; 
} 
   </STYLE> 
</HEAD> 
<BODY> 
<div id="capa1">Capa inferior</div> 
  <div id="capa2">Capa superior</div> 
</BODY>
images/03-11.png