Jugando a superponer contenidos

No me canso de repetir lo mismo porque es la clave para entender cómo funciona una página web: todas las etiquetas son rectángulos y todo su contenido esta en alguna etiqueta lo sepamos o no lo sepamos, lo hayamos indicado o no.

Esto es algo sencillo de comprobar, basta aplicar alguna propiedad CSS a todas las etiquetas de cierta clase para verlo; por ejemplo, si le agregamos un borde rojo con outline:

ver | ocultar

No importa cuáles sean ni importa si las dimensionamos o no, tampoco importa si definimos estilos, siempre serán rectángulos que se a acomodan solos de acuerdo a dos reglas, las etiquetas de tipo bloque se ubican una debajo de la otra (por ejemplo: DIV o P) y las de tipo inline, una al ado de la otra (por ejemplo A o SPAN). Esta es la forma "natural" con que se va armando la página; cada rectángulo se ubica según esas reglas, de arriba hacia abajo y de izquierda a derecha.

El CSS nos permite (y a veces obliga) cambiar ese orden natural, estableciendo propiedades espaciales. Una de las más simples de usar es tratar de romper la ley que dice que jamás, dos etiquetas, ocupan el mismo lugar es decir, que una esté encima de la otra ocupando el mismo espacio.

Suponiendo que dentro de un DIV contenedor al que dimensiono con height y width, coloco otros dos del mismo tamaño, lo que veré es uno debajo del otro:

<div>
<div> ....... el contenido superior ....... </div>
<div> ....... el contenido inferior ....... </div>
</div>

Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.

abajo

Si invertimos el orden, pasará lo mismo; el que esté primero se verá arriba y el otro abajo:

arriba

Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.

Superponer ambos es algo bastante simple, lo fundamental es que al contenedor le agreguemos la propiedad position: relative y a los contenidos la propiedad position: absolute con valores cero en left y top:

.demos {
    height: 100px;
    margin: 0 auto;
    position: relative;
    width: 250px;
}
.demos div {
  left: 0;
  height: 100px;
  top: 0;
  width: 250px;
  position:absolute;
}

Puestos de este modo, los forzamos a que ocupen el mismo espacio pero claro, sólo veremos uno de ellos, el último. Parece tonto sin embargo, eso es justamente lo que necesitamos para crear efectos y permutar entre el de abajo y el de arriba cuando ponemos el puntero del ratón encima.

Ese tipo de efecto se puede hacer de muchas maneras, por ejemplo, permutando la opacidad:

<style>
  .elvisible { opacity: 1; z-index: 2; }
  .elvisible:hover { opacity: 0; }
  eloculto { z-index: 1; }
</style>

<div class="demos">
  <div class="elvisible"> ....... el contenido visible ....... </div>
  <div class="eloculto"> ....... el contenido oculto ....... </div>
</div>

Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.

abajo

Usamos z-index para invertir el orden natural (para que por defecto se vea el de arriba) pero podemos hacer lo contrario, mostrar por defecto el de abajo y así, no necesitamos establecer el valor de z-index:

<div class="demos">
  <div> ....... el contenido oculto ....... </div>
  <div class="elvisible"> ....... el contenido visible ....... </div>
</div>

arriba

Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.

En estos ejemplo, tambien se aplica una transición que indicamos en el DIV visible por defecto:

elvisible {
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
}

Fácilmente, podríamos usar otros efectos, por ejemplo, haciendo que el que está debajo "suba"; este sería el ejemplo concreto:

<style>
  #toptop {
    background-color: #000;
    border: 2px solid #465;
    color: #FFF;
    font-family: Tahoma;
    font-size: 16px;
    height: 100px;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 250px;
  }
  #toptop div {
    height: 100px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 250px;
  }
  #toptop #arriba {
    background-color: #000000;
    -moz-transition: top 1s ease 0s;
    -webkit-transition: top 1s ease 0s;
    -o-transition: top 1s ease 0s;
     top: -100px;
  }
  #toptop #abajo {
    -moz-transition: top 1s ease 0s;
    -webkit-transition: top 1s ease 0s;
    -o-transition: top 1s ease 0s;
    top: 120px !important;
  }
  #toptop:hover #arriba {
    top: -120px !important;
  }
  #toptop:hover #abajo {
    top: 10px !important;
  }
</style>

<div id="toptop">
  <div id="arriba"> ....... el contenido visible ....... </div>
  <div class="eloculto" id="abajo3" style="top:10px;"> ....... el contenido oculto ....... </div>
</div>

Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.

abajo