Hay muchos momentos en el proceso de diseño de una página web en los que tendremos elementos que se sobreponen uno con el otro. Esta interacción entre elementos genera problemas, como tener que definir cuál está encima del otro. Cuando dichos elementos están, además, en una relación de paternidad, tendremos que definir otras características. Por ello, en este post, te enseñaremos cómo funciona la propiedad overflow en CSS y cómo nos permite definir los limites de los elementos que se sobreponen.
¿Qué es la propiedad overflow en CSS?
La propiedad overflow en CSS es una propiedad que nos permite determinar lo que sucede con un elemento cuando su contenido sobrepasa los límites de su contenedor. Recordemos que el contenedor de un elemento puede ser otro elemento, el cuerpo de la página web o el viewport como tal. Por tanto, podemos utilizar, por ejemplo, la propiedad overflow para controlar lo que pasa con un elemento hijo dentro de un elemento padre.
En el caso de la barra de progreso que creamos en nuestro post sobre cómo animar una barra de progreso en CSS, la propiedad overflow nos permitió determinar que cualquier contenido que cruzara los límites de la barra externa estaría oculto. Por ello, los bordes de la barra interna no son visibles.
Ten en cuenta que, según CanIUse, nuestro recurso para revisar el soporte de los navegadores frente a cualquier propiedad, la propiedad overflow en CSS no la pueden soportar por completo todos los navegadores. Sin embargo, los navegadores que sí lo hacen cubren la mayoría de su soporte.
¿Cómo funciona la propiedad overflow en CSS?
La propiedad overflow en CSS se controla por una variedad de palabras clave, cada una de ellas con un resultado diferente para el contenido que sobresale de un contenedor. A continuación, te explicamos lo que hace cada una de estas palabras clave:
- visible: esta opción nos permite definir que el contenido que sobresale de su contenedor es visible, así tenga que ser dibujado por fuera de su contenedor. Esta es la opción por defecto cuando no determinamos un valor para la propiedad overflow.
- hidden: esta opción genera el efecto contrario a la opción visible. Es decir, con esta opción hacemos que todo el contenido que sobresale de su contenedor se oculte. En la barra de progreso, esta opción nos permitió hacer que un rectángulo siguiera los límites de su elemento padre, convirtiéndolo en un rectángulo con bordes curvos.
- scroll: con esta opción, las barras de navegación se insertan en el elemento para que pueda accederse al contenido sobrante.
- auto: esta opción depende en gran parte del navegador de consulta, algunos agregan barras de navegación y otros no.
- inherit: esta opción nos permite hacer que el elemento herede los valores determinados en la propiedad overflow de su elemento padre.
Si quieres ver ejemplos en tiempo real sobre cómo funcionan las diferentes opciones de la propiedad overflow en CSS, te invitamos a ver la página oficial de la Mozilla Developer Network sobre esta propiedad.
¿Te animas a seguir aprendiendo?
Ahora que sabes cómo funciona la propiedad overflow en CSS, te recomendamos que juegues con ella en los elementos de tu propia página web. Por ello, te invitamos a formar parte de nuestro bootcamp intensivo sobre desarrollo web. En el Desarrollo Web Full Stack Bootcamp no solo seguirás aprendiendo sobre las distintas propiedades de diseño disponibles en CSS, sino que también podrás ejecutarlas en tu propio sitio web, el cual crearás en el transcurso del bootcamp con la guía y el feedback de nuestros profesores. ¿A qué esperas para ser parte de este grupo de fanáticos del desarrollo web y convertirte en todo un experto? ¡No te pierdas la oportunidad e inscríbete ya!
