Reto

Cursos Empresas Blog Live Conf Precios

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);
}

Comentarios

Fabricio Micheli

student•

Mi propuesta es similar a las anteriores, solo que invocaría a una función para que a la hora de usar el map, nos podamos ahorrar algo de código…

$indices:(
	raiz: 1000,
	carrousel: 1010,
	tooltip: 1020,
	navmenu: 1030,
	modal: 1040
);

@function setIndex($capa){
	@return map-get($indices,$capa);
}

.message{
  z-index:setIndex(modal)
}

La salida sería…

.message {
  z-index: 1040;
}

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Sebastián Buitrago

student•

que es dropdown, sticky, modal, overlay y tooltip

Daniel Benjamín Portada Zecua

student•

dropdown => es como el campo select de html sticky => un elemento que permanece fijo aunque se haga scroll en la pagina (ej. barra de redes sociales) modal => ventanas emergentes, tambien llamadas popups overlay => el fondo negro que cubre toda la pagina cuando abres un modal tooltip => la etiqueta descriptiva que aparece cuando pones el cursor sobre un elemento

Son términos muy comunes en desarrollo web

Naldo Duran

student•

Carlos Roberto Villatoro Barrios

student•

Lo maneje solo para posicionamiento de atrás, mediano y frontal. Pero me gusta la solución pues tienes razón podemos definir esto para mucho más.

Miguel Angel Reyes Moreno

student•

No entiendo este reto, ¿no es más sencillo simplemente utilizar z index?

Carlos Enrique Rojas Falcone

student•

El asunto es reutilizar y centralizar en un solo lugar los valores repetitivos. Imagina que en el proyecto tienes 8 styckies y 20 modals, y decides cambiar el roden stickies sobre los modals... pues de esta manera solo cambias los valores aquí y no en los 8 styckies y 20 modals Resumen, haciendo estas cosas, tu proyecto se vuelve más configurable y versátil.

Franco Nahuel Paez

student•

como estudiantes capaz vemos el uso de preprocesadores un poco inutil, pero realmente cuando estas en proyectos gigantescos donde no siempre vas a tener acceso al codigo de otras partes, ahi es donde sirven los preprocesadores, porque si alguien cambia un valor, los cambia en los millones de archivos que podria llegar a tener

Cristian Daniel Jesus Rios

student•

Duda, la solucion no era con una funcion? en esta solucion esta aplicando un Extend o era de cualquier forma la solucion ¿?

Alejandro Guevara

student•

Está declarando sus variables y su valor, luego llama la variable en un map, esto lo puedes hacer directamente o en function, eso si no utilices mixin ya que solo tendrás una propiedad CSS.

Rodrigo Rodriguez

student•

Tienes razon, dijo con funciones.

Jhon Alexander Alvarez Romero

student•

Entiendo que es una funcion pero como la diferenciamos de aquellas funciones que son tipo

@function zindex($index) {
  $zx: (
    down2: -2,
    down1: -1,
    base: 0,
    over1: 1,
    over2: 2
  );
  @return map-get($zx, $index)
}```
veo que la estrucctura es diferente,sobretodo al usar o no la palabra function

Pablo Andres

student•

Nutriéndome de los aportes anteriores de mis compañeros de clase el código me queda así:

$z-index: (
    layer-top: 1000,
    layer-6: 80,
    layer-5: 70,
    layer-middle: 50,
    layer-3: 30,
    layer-2: 20,
    layer-1: 10,
    layer-bottom: 0,
);

.whatever{
	z-index: map-get($z-index, layer-top);
}```

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Leonardo Maya Iregui

student•

Mi solución fue definir nombres a las capas. Y agregando también el valor por defecto del z-index.

$zindex: (
    top:10,
    under-top:8,
    middle:6,
    over-bottom:4,
    bottom:2,
    initial:0
)

Moisés Alejandro Guevara Jauregui

student•

Tome en cuenta:

Que cada elemento debe tener un margen lo suficientemente distante.
El hecho de que hay elementos que deben estar por arriba del todo o por detras del todo.
Los comportamientos peculiares que tienen los pseudo elementos :before y :after.

$depths: (
    here: 0,
    pseudo-near: 1,
    too-near: 50,
    near: 100,
    half: 200,
    far: 300,
    too-far: 350,
    pseudo-far: -1,
    there: 9999
);

Moises Rolando Machuca Valverde

student•

Buena Solución

Carlos Jesús Fernández Salazar

student•

La ejecución me parece perfecta 😄 . Tengo una duda, en este ejemplo creo que el modal quedaría detrás del overlay, ¿debería tener overlay el z-index de 140 y el modal 160?

Mauro Pita

student•

Las funciones facilitan la forma de crear estilos de forma dinámica.

Harold David Avila Sabogal

student•

Muy buena solución Muchas gracias que buen aporte

Jorge Arturo Salgado Ordoñez

student•

¡Fantástico!

Jorginho Jesus Ravello Rios

student•

Gracias por su aporte.

Gianfranco Correa

student•

Me gusta lo que vi en los comentarios, mi propuesta es una combinacion con el contenido del articulo, ya que me parece correcto dejar un margen entre cada z-index por si es necesario poner valores muy especificos durante el proyecto

$z-index: (
	dropdown:100, 
	sticky:120, 
	modal:140, 
	overlay:160,
	tooltip:180,
	layer-top: 1000
	);

.modal{
	z-index: map-get($z-index, modal);
}

Harold David Avila Sabogal

student•

Muchas gracias por tu aporte

Carlos Alberto Morales Heras

company_admin•

Llegue a la misma solución que muchos pero me gusto la idea de las capaz, ahora bien yo tenia entendido para los z-index usar valores de 9, por ejemplo:

Nivel minimo 9 entre medio definirlos en base a tu criterio (99, 999, 9999, 99999). Nivel Maximo 999999

Diego Ortiz

student•

No termino de entender por qué esos nombres para las keys, yo supongo que son elementos comunes del UI dónde solemos necesitar el z-index, pero no estoy seguro si es por eso. De serlo quisiera saber si hay más casos que debemos tener en cuenta para definir esta lista de z-indexes. Por ejemplo yo he tenido que poner algo debajo de todo (como un background), y a veces algo por encima de todo (como elementos "decorativos"). Quedaría bien algo como:

zindex-background: -100;
zindex-top: 200

Edward Steven Ramos Palacios

teacher•

El z-index define el orden en el que se superponen los elementos. Tu decides ese valor. Si quieres que haya uno siempre encima de todo puedes usar 9999 si deseas. Asi puedes asegurarte que siempre estará encima de todo.

Sebastian Marin

student•

interesante

@function zindex($index) {
  $zx: (
    down2: -2,
    down1: -1,
    base: 0,
    over1: 1,
    over2: 2
  );
  @return map-get($zx, $index)
}```
veo que la estrucctura es diferente,sobretodo al usar o no la palabra function

$z-index: (
    layer-top: 1000,
    layer-6: 80,
    layer-5: 70,
    layer-middle: 50,
    layer-3: 30,
    layer-2: 20,
    layer-1: 10,
    layer-bottom: 0,
);

.whatever{
	z-index: map-get($z-index, layer-top);
}```

Reto - Solución

Preprocesador Sass

Qué aprenderás sobre Sass

Introducción al Curso de Sass

Diferencias entre Sass, Stylus y Less

Compilación de código en archivos CSS

Instalación

Estructura de CSS

Variables

Variables

Solución al reto

Anidaciones

Anidaciones

Mixins

Mixins

Continuando con Mixins

Uso de la directiva `content` (`block` en Stylus)

Extend

Funciones

Funciones

Directiva

Ejemplos de funciones

Reto

Reto - Solución

Controles de Flujo

Listas y directiva each

Ciclos FOR/EACH

Condicionales