Apilamiento y desborde de elementos

Dentro de CSS, existen dos propiedades que son muy útiles en algunas ocasiones: z-index y overflow.

z-index hace referencia al apilamiento de los elementos de un sitio web, es decir, con z-index podemos cubrir un elemento con otros dándoles un orden para ello.

Como se muestra en la imagen, le damos un valor entero a z-index para indicar en que nivel de apilamiento se encuentra. El valor 0 es el valor por defecto de todos los elementos y entre más alto el valor sea, más arriba se encuentra de la pila.

overflow hace referencia al desbordamiento de los elementos. Recorta o añade scrollbars cuando el contenido de un elemento es demasiado grande para caber en un área especificada.

overflow tiene cuatro valores:

visible: es el valor por defecto. En este caso, el contenido del elemento se desborda y se queda

hidden: el contenido del elemento se recorta y sólo se ve lo que cabe en el elemento contenedor.

scroll: el contenido del elemento se recorta y se crean barras de desplazamiento para ver el contenido completo. Scroll crea barras de desplazamiento horizontales y verticales, aunque

auto: es similar a scroll, sólo que añade barras de desplazamiento cuando sea necesario.

overflow sólo funciona para los elementos block con una altura especificada.