El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Índex Z de CSS

Següent ►
►

L'índex Z és una propietat de CSS que controla l'ordre de superposició dels elements posicionats en una pàgina web. Aquesta propietat és especialment útil quan es treballa amb elements que es superposen, com ara finestres emergents, menús desplegables o capes de contingut.

Conceptes Clau

  • Propietat z-index: Defineix l'ordre de superposició d'un element.
  • Elements posicionats: Només els elements amb una propietat de posició diferent de static poden tenir un z-index.
  • Context de superposició: Cada element amb una propietat de posició diferent de static crea un nou context de superposició.

Sintaxi

element {
  position: relative; /* o absolute, fixed, sticky */
  z-index: valor;
}
  • valor: Pot ser un número positiu, negatiu o zero. Els valors més alts es mostren per sobre dels valors més baixos.

Exemples Pràctics

Exemple 1: Elements amb Diferents z-index

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemple d'Índex Z</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      position: absolute;
    }
    .box1 {
      background-color: red;
      top: 50px;
      left: 50px;
      z-index: 1;
    }
    .box2 {
      background-color: blue;
      top: 70px;
      left: 70px;
      z-index: 2;
    }
    .box3 {
      background-color: green;
      top: 90px;
      left: 90px;
      z-index: 3;
    }
  </style>
</head>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</body>
</html>

En aquest exemple, la caixa verda (box3) es mostrarà per sobre de la caixa blava (box2), que al seu torn es mostrarà per sobre de la caixa vermella (box1).

Exemple 2: Elements amb el Mateix z-index

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemple d'Índex Z</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      position: absolute;
    }
    .box1 {
      background-color: red;
      top: 50px;
      left: 50px;
      z-index: 1;
    }
    .box2 {
      background-color: blue;
      top: 70px;
      left: 70px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
</body>
</html>

En aquest cas, com que ambdues caixes tenen el mateix z-index, l'ordre de superposició es determinarà per l'ordre en què apareixen en el codi HTML. La caixa blava (box2) es mostrarà per sobre de la caixa vermella (box1).

Exercicis Pràctics

Exercici 1: Crear Elements Superposats

Crea tres elements div amb diferents colors i utilitza z-index per controlar l'ordre de superposició. Assegura't que cada element tingui una posició diferent de static.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici d'Índex Z</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      position: absolute;
    }
    .box1 {
      background-color: yellow;
      top: 50px;
      left: 50px;
      z-index: 3;
    }
    .box2 {
      background-color: purple;
      top: 70px;
      left: 70px;
      z-index: 2;
    }
    .box3 {
      background-color: orange;
      top: 90px;
      left: 90px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</body>
</html>

Exercici 2: Crear un Menú Desplegable

Crea un menú desplegable que es mostri per sobre del contingut principal utilitzant z-index.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercici de Menú Desplegable</title>
  <style>
    .menu {
      width: 200px;
      height: 50px;
      background-color: #333;
      color: white;
      position: relative;
    }
    .dropdown {
      display: none;
      position: absolute;
      top: 50px;
      left: 0;
      width: 200px;
      background-color: #444;
      z-index: 10;
    }
    .menu:hover .dropdown {
      display: block;
    }
  </style>
</head>
<body>
  <div class="menu">
    Menú
    <div class="dropdown">
      <p>Opció 1</p>
      <p>Opció 2</p>
      <p>Opció 3</p>
    </div>
  </div>
</body>
</html>

Errors Comuns i Consells

  • No establir position: Recorda que la propietat z-index només funciona amb elements que tenen una propietat de posició diferent de static.
  • Context de superposició: Cada element posicionat crea un nou context de superposició. Això vol dir que els z-index dels elements fills es comparen dins del seu propi context de superposició, no amb elements fora d'aquest context.

Conclusió

La propietat z-index és una eina poderosa per controlar l'ordre de superposició dels elements en una pàgina web. Comprendre com funciona i com utilitzar-la correctament és essencial per crear dissenys complexos i interactius. Amb els exemples i exercicis proporcionats, hauríeu de tenir una bona comprensió de com aplicar z-index en els vostres projectes.

◄ Anterior
◄
Següent ►
►

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats