Reto - Solución

En el reto anterior el profesor propuso crear una función que nos permita manejar los z-index de nuestro proyecto. Para esto, lo primero que debemos hacer es definir cuales son las respectivas propiedades y valores que vamos a manejar. En este caso decidí que los elementos que suelen tener la propiedad de z-index son:

• Los dropdown que contenga mi proyecto.
• Los elementos sticky.
• Los modales
• El overlay de cada modal
• Los tooltip

Una vez definido esto, vamos a asignarle un valor. Es importante que no sean valores seguidos, ya que puede que necesitemos agregar la propiedad de z-index a elementos individuales en el camino y no queremos que se pisen. Para esto, dejaremos un margen de 20 entre cada uno.

Como resultado nuestra función quedará así:

$fs: ( 
	zindex-dropdown: 100, 
	zindex-sticky: 120, 
	zindex-modal: 140, 
	zindex-overlay:160,
	zindex-tooltip:180
);

De esta forma, por ejemplo, cada que nos topemos con un elemento sticky en nuestro proyecto, podremos asignarle un valor a la propiedad z-index de la siguiente manera:

.sticky{
  z-index: map-get($fs, zindex-sticky);
}