OmbuShop Crea Tu Tienda Online

Z-index con Sass

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Cómo organizar los números de z-index de los diferentes elementos de una página compleja.

La organización de los diferentes niveles de z-index en sitios web complejos suele ser desprolija y difícil de mantener. Veremos aquí una técnica con Sass que saltea estos inconvenientes!

z-index

Sass permite ahora la inclusión de listas dentro de una variable, por lo que podremos generar una lista con los nombres que tendrán los elementos cuya propiedad z-index queremos controlar.

Una vez hecho esto, podemos utilizar la función index para obtener el valor del índice del mentado elemento en dicha lista. Se trata de una función que espera recibir dos parámetros: la variable que contiene la lista, y luego el nombre de la variable cuya posición tiene dentro de la variable. Esto lo podemos repetir con todos los elementos a los cuales se les deba indicar un valor específico en el z-index.

Vaya el código a continuación:


// Creación de lista de Sass:
$elements_order: elemento_a, elemento_b, elemento_c, elemento_d;
/* ———————— */
/* Cuestiones estructurales */

#elemento-a {
position: absolute;
top: 20px;
left: 20px;
z-index: index($elements_order, elemento_a);
}
#elemento-b {
position: absolute;
top: 40px;
left: 40px;
z-index: index($elements_order, elemento_b);
}
#elemento-c {
position: absolute;
top: 60px;
left: 60px;
z-index: index($elements_order, elemento_c);
}
#elemento-d {
position: absolute;
top: 80px;
left: 80px;
z-index: index($elements_order, elemento_d);
}
/* ——————— */
/* Cuestiones cosméticas */

body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 200;
letter-spacing: .1em;
}
#elemento-a,
#elemento-b,
#elemento-c,
#elemento-d {
color: #fff;
text-align: center;
padding: 10px;
width: 100px;
height: 100px;
box-shadow: rgba(0,0,0,.2) (-2px) 3px 2px;
}
#elemento-a {
background: #E74C3C;
}
#elemento-b {
background: #4AA3DF;
}
#elemento-c {
background: #9B59B6;
}
#elemento-d {
background: #1ABC9C;
}

See the Pen qnAiC by Lucas Mourelle (@lucasmourelle) on CodePen.
0

El día de mañana, en caso de querer cambiar el número de los z-index, no tendremos más que cambiar de orden a los elementos que están dentro de la lista con tal fin. Los que están hacia lo último en la lista, serán los que se percibirán más arriba que los demás.

Más información sobre este mismo método, en inglés, en el siguiente artículo.