Superponiendo divs mediante CSS

Por norma general, todas las etiquetas html ocupan un espacio dentro de la página. Este modelo de cajas se posicionan unas junto a otras o bien unas debajo de otras. Pero si lo que queremos es que unas cajas se superpongan con otras, deberemos “romper” la barrera para que una caja se sitúe por encima de otra. Para ello, deberemos echar mano de las etiquetas CSS position y z-index.

Etiqueta position:

La etiqueta position tiene por defecto el valor static. Para ubicar un <div> generalmente se usa otro div contenedor con valor relative para que se adapte a la página. En su interior ubicaremos nuestro div indicando position absolute y dandole los valores necesarios para posicionarlo dentro del contenedor, tal y como se muestra en el siguiente ejemplo:

<div style="position: relative;">
  <div style="position: absolute; left: 40px; top: 40px;"> CUADRO 1 </div>
</div>

En el caso de querer superponer una caja encima de otra, tan solo tendremos que indicar los valores oportunos a ambos divs:

<div style="position: relative;">
  <div style="position: absolute; left: 40px; top: 40px;"> CUADRO 1 </div>
  <div style="position: absolute; left: 80px; top: 90px;"> CUADRO 2 </div>
</div>

Aunque para el ejemplo hemos añadido mas estilos a las cajas para aumentar su visibilidad, gracias al posicionamiento obtendríamos un resultado como el siguiente:

superponiendo-divsEtiqueta z-index:

Gracias a la incorporación de la etiqueta z-index en nuestro código, podremos alterar el orden natural de las cajas. Z-index modificará el orden, siendo las capas mas visibles para el usuario las que tengan un número mayor, quedando mas ocultas las que tengan un indice menor, tal como vemos en el siguiente ejemplo:

<div style="position: relative;">
  <div style="position: absolute; left: 10px; top: 25px; z-index: 1;"> CUADRO 1 </div>
  <div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> CUADRO 2 </div>
  <div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> CUADRO 3 </div>
</div>superponiendo-divs-2
Facebooktwittergoogle_plus