post icon

Traer al frente un DIV con CSS

Como verán hace un par de semanas que no he escrito en el blog y respondiendo muy poco los comentarios de los usuarios ya que estoy consumiendo casi todo mi tiempo en un proyecto.

Para variar en esta entrega escribiré sobre CSS, sencillo pero útil. Cuando comenzamos a crear muchos contenedores DIV en nuestro sitio y dentro cargamos menús dinámicos o combos que despliegan varias filas y necesitan espacio para mostrarse – estos son ejemplos muy típicos aunque pueden ser otros los casos, dependiendo de cada proyecto – y lo que haremos será apilar los contenedores del modo que necesitemos para mostrarse bien.

En el ejemplo verán un combo de lenguajes que estará en la parte superior del sitio y se muestra debajo de un menú dinámico, siendo que necesitamos que se muestren al revés.

La propiedad CSS que veremos será el z-index y para usarla debemos tener en cuentas ciertas características como:

  • Sólo funciona si su propiedad position está configurada como absolute, fixed o relative
  • Modificar la opacidad por debajo del valor 1 genera el mismo comportamiento de apilamiento
  • Todos los contenedores que están al mismo nivel que su padre tiene el mismo valor de z-index a no ser que se lo modifique explicitamente

Otro dato interesante para tener en cuenta es la prioridad del eje Z que toma el CSS

  • Contenedores seteados manualmente su eje z-index
  • Contenedores flotantes
  • Según su aparición en el código fuente

Para comprender mejor podemos imaginarnos un plano cartesiano, allí tenemos el eje X que nos indica su posicion de derecha a izquierda en un plano, el eje Y su posición de arriba hacia abajo en un plano, pero si llevamos esto a un plano 3-d obtendremos también la profundidad al cual llamamos eje Z, quien determina como están apilados los contenedores finalmente.

En el siguiente ejemplo vemos como queda si no seteamos los valores propiedad CSS

Si aplicamos los siguiente valores

#caja_idioma {
   position: relative;
   z-index: 1;
}

#menu_principal {
   position: relative;
   z-index: 0;
}

Si necesitamos comprender con mayor profundidad podemos encontrar más información en el sitio de la W3C o ver un ejemplo online.

13 Octubre 2010

Comentarios desde Facebook:

  1. avatar
    VICTOR Mozilla Firefox Windows
    26 Noviembre 2013 at 15:01 #

    Gracias !!!!!

  2. avatar
    rex PERU Google Chrome Windows
    4 Octubre 2012 at 11:59 #

    Bien.. man me soluciono la vida… te pasaste con el articulo….

  3. avatar
    Yutaru Google Chrome Windows
    7 Julio 2012 at 12:38 #

    Genial Man, ando iniciandome en html5 y justamente andaba buscando eso
    GRACIAS!!!

Trackbacks/Pingbacks

  1. Traer al frente un DIV | Diario de Ingeniería de @moicartagena UNITED STATES PHP - 21 Octubre 2013

    […] http://www.devtroce.com/2010/10/13/traer-al-frente-un-div-con-css/ […]

Responder