oletusWEBos.es - Lecciones paso a paso para crear tu web. Tutoriales de Dreamweaver, HTML y CSS

Curso CSS - Lección 15: Capas (z-index)

Podríamos decir que CSS tiene tres dimensiones: altura, anchura y profundidad. Todas las lecciones anteriores se han basado en las dimensiones altura y anchura, en esta veremos la profundidad. Aprenderemos a hacer que unos elementos se sobrepongan sobre otros.

Para ello asignaremos a cada elemento un número por medio de la propiedad z-index. Es decir el elemento que tenga un número mayor se sobrepondrá sobre otro elemento con un número menor. Fácil ¿no?, para que te quede más claro veamos un ejemplo:

Supongamos que coleccionamos cromos de futbolistas. Podíamos presentar esos cromos en nuestra web de tal manera que a cada cromo le asignamos un número por medio de la propiedad z-index:

Alucinante!!! ¿verdad?, pués claro que si!!! je je. Dejemos atrás la euforia y veamos como sería el código CSS a insertar en nuestra hoja de estilos:

#cromo1 {

   position: absolute;

   left: 150px;

   top: 150px;

   z-index: 1;

}

#cromo2 {

   position: absolute;

   left: 190px;

   top: 190px;

   z-index: 2;

}

#cromo3 {

   position: absolute;

   left: 220px;

   top: 220px;

   z-index: 3;

}

Y como ya supondrás el código HTML a insertar en nuestro documento sería el siguiente:

<div id="cromo1">

<img src="futbolista1.jpg"/>

</div>

<div id="cromo2">

<img src="futbolista2.jpg"/>

</div>

<div id="cromo3">

<img src="futbolista3.jpg"/>

</div>

El ejemplo anterior lo hemos hecho con tres cromos, pero se podría hacer con el númro de imágenes que creas oportuno.

Usar la propiedad z-index nos ofrece múltiples posibilidades... colocar imágenes sobre texto, texto sobre imágenes, etc... .

Bueno amigos ya hemos llegado al final del curso, espero que el curso te haya sido ameno y entretenido. Recuerda que puedes comentarnos las dudas que te surjan en el Foro OTW.

Por último recuerda validar tu hoja de estilos CSS en el validador. De esta manera sabrás si tu hoja de estilos contiene o no errores.

Quiero aprender más!!!

Menú
Indice del Curso
  1. Introducción
  2. ¿Qué es CSS?
  3. Sintaxis de CSS
  4. Fondos y colores
  5. Fuentes
  6. Texto
  7. Enlaces
  8. Atributos "class" e "id"
  9. Elementos "span" y "div"
  10. Modelo de caja
  11. Modelo de caja (margen y relleno)
  12. Modelo de caja (bordes)
  13. Modelo de caja (altura y anchura)
  14. Elementos flotantes
  15. Posicionar elementos
  16. Capas (z-index)

©oletusWEBos 2009 all right reserved | Contácta con oletusWEBos.es

Design By: JTole®