Taller > CSS
Display en CSS
Tabla de contenidos
Sintaxis
Valores
Ejemplos
Sintaxis
La sintaxis para establecer el valor de la propiedad display en CSS es la siguiente:
selector { display: value; }
Donde selector es el elemento o los elementos HTML a los que se aplicará la regla de estilo, y value es el valor de display que se quiere establecer. Puede ser cualquiera de los valores mencionados anteriormente, como block, inline, none, flex, etc.
Por ejemplo, para establecer un elemento div como un bloque, se puede utilizar la siguiente regla:
div { display: block; }
También se pueden establecer varios selectores para aplicar a varios elementos al mismo tiempo, separando cada selector con una coma:
div, p, h1 { display: block; }
Además, también se pueden establecer valores para display utilizando una clase o un id:
.container { display: flex; } #main-header { display: grid; }
Es importante tener en cuenta que algunos valores de display pueden tener un comportamiento diferente en función del contexto en el que se usen. Por ejemplo, un elemento con display: block dentro de un elemento con display: flex se comportará de manera diferente a un elemento con display: block en un elemento padre con display: block.
Valores
Los valores disponibles para la propiedad display en CSS incluyen:
block: El elemento se comporta como un bloque, ocupando todo el ancho disponible de su contenedor y se posiciona en una nueva línea. Los elementos con display: block pueden tener un ancho y un alto especificados.
inline: El elemento se comporta como una línea de texto, ocupando solo el ancho necesario y se posiciona en la misma línea que los elementos vecinos. Los elementos con display: inline no pueden tener un ancho o alto especificado.
inline-block: El elemento se comporta como un elemento inline, pero también permite especificar un ancho y un alto.
none: El elemento no se muestra en absoluto y no ocupa espacio en la página.
flex: El elemento se comporta como un contenedor flex, permitiendo posicionar y alinear sus elementos hijos de manera flexible.
grid: El elemento se comporta como un contenedor grid, permitiendo posicionar y alinear sus elementos hijos en una cuadrícula.
table: El elemento se comporta como una tabla con filas y columnas.
table-caption: El elemento se comporta como un título de tabla.
table-cell: El elemento se comporta como una celda de una tabla.
table-row: El elemento se comporta como una fila de una tabla.
table-column: Muestra un elemento como una columna en una tabla.
table-row-group: El elemento se comporta como un grupo de filas de una tabla.
table-header-group: El elemento se comporta como un grupo de encabezados de una tabla.
table-footer-group: El elemento se comporta como un grupo de pie de página de una tabla.
list-item: El elemento se comporta como un elemento de una lista.
flow-root: Muestra un elemento como un bloque independiente del flujo de documento, es útil para contener elementos flotantes.
flow: Muestra un elemento como un elemento flotante.
run-in: El elemento se comporta como un elemento block o inline, dependiendo del contexto.
initial: El elemento se comporta como el valor inicial establecido por el navegador.
Cada uno de estos valores tiene diferentes usos y comportamientos, es importante tener en cuenta que es importante conocer y utilizar el valor adecuado de acuerdo a la necesidad de diseño de tu proyecto.
Ejemplos
Aquí hay algunos ejemplos de cómo se utilizan algunos valores comunes de display en CSS:
block:
/* Establece el elemento como un bloque que ocupa todo el ancho disponible de su contenedor */ div { display: block; /* establece el ancho del elemento a la mitad de su contenedor */ width: 50%; /* establece un margen alrededor del elemento */ margin: 10px; }
inline:
/* Establece el elemento como una línea de texto, ocupando solo el ancho necesario */ span { display: inline; }
inline-block:
/* Establece el elemento como un elemento inline, pero permite especificar un ancho y un alto */ button { display: inline-block; /* establece el ancho del elemento */ width: 100px; /* establece el alto del elemento */ height: 50px; }
none:
/* Oculta el elemento */ .hidden { display: none; }
flex:
/* Establece el elemento como un contenedor flex */ .container { display: flex; /* permite que los elementos hijos se ajusten al ancho del contenedor */ flex-wrap: wrap; /* alinea los elementos hijos en el centro verticalmente */ align-items: center; /* distribuye los elementos hijos con espacio entre ellos */ justify-content: space-between; }
grid:
/* Establece el elemento como un contenedor grid */ .grid-container { display: grid; /* define una cuadrícula con 3 columnas de tamaño igual */ grid-template-columns: repeat(3, 1fr); /* define una fila de 100px */ grid-template-rows: 100px; /* establece un espacio de 10px entre las celdas de la cuadrícula */ grid-gap: 10px; }
table:
/* Establece el elemento como una tabla con filas y columnas */ table { display: table; /* elimina los espacios entre las celdas */ border-collapse: collapse; /* hace que la tabla ocupe todo el ancho del contenedor */ width: 100%; }
table-caption:
/* Establece el elemento como un título de tabla */ caption { display: table-caption; /* alinea el texto en el centro */ text-align: center; /* establece el tamaño de la fuente */ font-size: 16px; }
table-cell:
/* Establece el elemento como una celda de una tabla */ td { display: table-cell; /* establece un relleno alrededor del texto */ padding: 10px; /* alinea el texto en el centro */ text-align: center; /* establece un borde alrededor de la celda */ border: 1px solid black; }
table-row:
/* Establece el elemento como una fila de una tabla */ tr { display: table-row; }
table-row-group:
/* Establece el elemento como un grupo de filas de una tabla */ thead { display: table-row-group; }
table-header-group:
/* Establece el elemento como un grupo de encabezados de una tabla */ th { display: table-header-group; /* establece el color de fondo */ background-color: #ddd; /* establece el peso de la fuente en negrita */ font-weight: bold; }
table-footer-group:
/* Establece el elemento como un grupo de pie de página de una tabla */ tfoot { display: table-footer-group; /* establece el color de fondo */ background-color: #ddd; /* alinea el texto en el centro */ text-align: center; }
list-item:
/* Establece el elemento como un elemento de una lista */ li { display: list-item; /* establece el tipo de viñeta */ list-style-type: square; /* establece un margen izquierdo */ margin-left: 20px; }
run-in:
/* Establece el elemento como un elemento `block` o `inline`, dependiendo del contexto */ h1 { display: run-in; /* establece el tamaño de la fuente */ font-size: 24px; }
compact:
/* Establece el elemento como un elemento `block` o `inline`, dependiendo del contexto y del tamaño del contenedor */ p { display: compact; /* establece el tamaño de la fuente */ font-size: 16px; /* establece un margen alrededor del elemento */ margin: 10px; }
marker:
/* Establece el elemento como un marcador de una lista */ li::marker { display: marker; /* establece el tipo de viñeta */ list-style-type: disc; /* establece el color de la viñeta */ color: red; }
initial:
/* Establece el elemento como el valor inicial establecido por el navegador */ .initial { display: initial; }
inherit:
/* Establece el elemento para heredar el valor de `display` de su elemento padre */ .inherit { display: inherit; }
Position en CSS
static (valor por defecto): El elemento se posiciona de acuerdo a cómo aparece en el flujo del documento.
relative: El elemento se posiciona en relación con su posición original en el flujo del documento. Se pueden usar las propiedades “top”, “bottom”, “left” y “right” para moverlo a una nueva posición.
absolute: El elemento se posiciona en relación con su primer ancestro con posicionamiento no estático (es decir, cualquier valor diferente a “static”). Las propiedades “top”, “bottom”, “left” y “right” funcionan de la misma manera que en “relative”.
fixed: El elemento se posiciona con relación a la ventana del navegador y permanece en la misma posición aunque el usuario haga scroll.
sticky: Es una mezcla entre “relative” y “fixed”, el elemento se posiciona en relación con su posición original en el flujo del documento, pero una vez que el usuario hace scroll y el elemento llega a un cierto punto en la pantalla, se comporta como “fixed” y se queda en su posición.
Es importante tener en cuenta que para usar las propiedades “top”, “bottom”, “left” y “right” es necesario que el elemento tenga una posición “relative”, “absolute” o “fixed”.
Posición estática
La posición “static” es el valor por defecto para todos los elementos en un documento HTML y es la forma en que los elementos se colocan en una página de manera predeterminada. Cuando un elemento tiene una posición “static”, se posiciona en el orden en que aparece en el código HTML, y no se pueden utilizar las propiedades “top”, “bottom”, “left” y “right” para moverlo.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
background-color: #f1f1f1;
}
.box {
width: 30%;
height: 150px;
margin: 10px;
background-color: #ffcc00;
position: static;
/* este es el valor por defecto */
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
En este ejemplo, los elementos con clase “box” se mostrarán uno al lado del otro en una fila, debido a que se estableció display: flex y flex-wrap: wrap en la clase “container”, y se establecieron un ancho y alto a los elementos “box”.
Sin embargo, al tener una posición “static” no se pueden utilizar las propiedades “top”, “bottom”, “left” y “right” para moverlos.
Es importante mencionar que la propiedad position:static no es necesaria si no se establece ninguna otra posición, ya que es el valor por defecto.
Posición relativa
La posición “relative” permite especificar cómo un elemento se posiciona en relación con su posición original en el flujo del documento. Al establecer un elemento como “relative”, se pueden usar las propiedades “top”, “bottom”, “left” y “right” para desplazarlo con relación a su posición original.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 90%;
margin: 0 auto;
background-color: #f1f1f1;
}
.box {
width: 150px;
height: 150px;
background-color: #ffcc00;
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
En este ejemplo, el elemento con clase “box” se mostrará en su posición original dentro del contenedor, pero se ha desplazado hacia abajo 50px y hacia la derecha 50px en relación con su posición original gracias a las propiedades “top” y “left” respectivamente.
Otro ejemplo:
<!DOCTYPE html> <html>
<head>
<style>
.container {
position: relative;
width: 90%;
height: 300px;
margin: 0 auto;
background-color: #f1f1f1;
}
.box1 {
position: relative;
width: 150px;
height: 150px;
background-color: #ffcc00;
top: -50px;
left: -50px;
}
.box2 {
position: relative;
width: 150px;
height: 150px;
background-color: #00ccff;
bottom: -50px;
right: -50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
En este ejemplo se crearon dos elementos “box1” y “box2” con posición “relative”, y cada uno se ha desplazado en una dirección opuesta, el primero hacia arriba y a la izquierda, y el segundo hacia abajo y a la derecha.
Esto se logró utilizando las propiedades “top” y “left” para el primer elemento y “bottom” y “right” para el segundo.
Al igual que en el ejemplo anterior el contenedor tiene una posición “relative” entonces los elementos “box” se posicionan con relación a su posición dentro de ese contenedor y no en relación con el resto de la página.
Es importante mencionar que al establecer un elemento como “relative”, no afecta el flujo del documento, es decir, los elementos siguen ocupando el mismo espacio y no afecta a los elementos hermanos.
Posición fija
La propiedad “position: fixed” es utilizada para posicionar un elemento en una posición fija en relación con la ventana del navegador. Es similar a “absolute” pero mientras que la posición “absolute” se posiciona con relación a un elemento padre cuyo posición no es fija, “fixed” se posiciona en relación con la ventana del navegador y permanece en esa posición aunque el usuario haga scroll en la página.
Al establecer un elemento con esta propiedad, se pueden utilizar las propiedades “top”, “bottom”, “left” y “right” para desplazarlo en relación con su posición en la ventana del navegador.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.caja-fija {
position: fixed;
top: 10px;
right: 10px;
width: 150px;
height: 150px;
background-color: #ffcc00;
}
</style>
</head>
<body>
<div class="caja-fija"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur, nibh in tincidunt hendrerit, magna neque malesuada eros, eget varius risus ex a magna. Sed interdum, nisl id bibendum
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur, nibh in tincidunt hendrerit, magna neque malesuada eros, eget varius risus ex a magna. Sed interdum, nisl id bibendum
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur, nibh in tincidunt hendrerit, magna neque malesuada eros, eget varius risus ex a magna. Sed interdum, nisl id bibendum
</body>
</html>>
En este ejemplo, se ha creado un elemento con clase “caja-fija” con posición “fixed” y se ha establecido en las propiedades “top” y “right” con valor 10px, esto hace que el elemento aparezca en la esquina superior derecha de la ventana del navegador, y aunque el usuario haga scroll en la página, el elemento permanecerá en la misma posición.
Posición absoluta
La posición “absolute” permite especificar cómo un elemento se posiciona en relación a su elemento padre más cercano cuyo posicionamiento no sea “estático”.
Al establecer un elemento como “absolute”, se pueden utilizar las propiedades “top”, “bottom”, “left” y “right” para desplazarlo en relación a su elemento padre.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 90%;
height: 300px;
margin: 0 auto;
background-color: #f1f1f1;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 150px;
height: 150px;
background-color: #ffcc00;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
En este ejemplo, se estableció la posición “relative” en el contenedor y “absolute” en el elemento “box”, luego el elemento “box” se ha desplazado hacia abajo 50px y hacia la derecha 50px en relación a su elemento padre (el contenedor) gracias a las propiedades “top” y “left” respectivamente.
Al establecer un elemento como “absolute”, este se saca del flujo normal de la página, es decir, los elementos siguen ocupando el mismo espacio, pero el elemento con posición absoluta se posiciona en relación a su padre más cercano cuyo posicionamiento no sea estático.
Posición pegajosa
La posición “sticky” es una mezcla entre “relative” y “fixed”, el elemento se comporta como “relative” hasta que se desplaza fuera del viewport y luego se comporta como “fixed” manteniendo su posición en la pantalla.
La posición “sticky” se especifica con la propiedad “position” y se utiliza en conjunto con “top”, “bottom”, “left” y/o “right” para indicar el punto en el que el elemento se pegará al viewport.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
position: sticky;
top: 0;
background-color: #f1f1f1;
padding: 10px;
}
</style>
</head>
<body>
<div class="navbar">
<h1>Navbar</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur, nibh in tincidunt hendrerit, magna neque malesuada eros, eget varius risus ex a magna. Sed interdum, nisl id bibendum
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur, nibh in tincidunt hendrerit, magna neque malesuada eros, eget varius risus ex a magna. Sed interdum, nisl id bibendum
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur, nibh in tincidunt hendrerit, magna neque malesuada eros, eget varius risus ex a magna. Sed interdum, nisl id bibendum
</body>
</html>
En este ejemplo, se ha creado un elemento con clase “navbar” con posición “sticky” y se ha establecido en la propiedad “top” con valor 0px, esto hace que el elemento permanezca en la parte superior de la pantalla mientras el usuario hace scroll en la página, pero si el elemento se desplaza fuera del viewport, este volverá a su posición original.
Z-index en CSS
Por ejemplo, si tienes un elemento con un z-index de 2 y otro elemento con un z-index de 1, el elemento con el z-index de 2 se mostrará encima del elemento con el z-index de 1.
El valor predeterminado para z-index es 0, por lo que los elementos con un z-index no especificado se comportarán como si tuvieran un z-index de 0.
Es importante tener en cuenta que la propiedad z-index solo funciona en elementos que tienen una posición establecida (position: absolute, position: relative, o position: fixed).
Valores
La propiedad z-index en CSS acepta dos tipos de valores:
Enteros: Puedes especificar un valor entero para el z-index, como “z-index: 3”. Los elementos con un z-index más alto se mostrarán encima de los elementos con un z-index más bajo.
Auto: El valor predeterminado para z-index es “auto”, lo que significa que el navegador determinará la posición del elemento en relación a los demás elementos en la página.
Es importante tener en cuenta que la propiedad z-index solo funciona en elementos que tienen una posición establecida (position: absolute, position: relative, o position: fixed). Si un elemento no tiene una posición establecida, el valor de z-index no tendrá ningún efecto.
Ejemplo de uso
Aquí tienes un ejemplo de código HTML y CSS que utiliza la propiedad z-index:
HTML:
<div id="element1">Elemento 1</div>
<div id="element2">Elemento 2</div>
CSS:
#element1 {
position: relative;
z-index: 2;
background-color: red;
}
#element2 {
position: relative;
z-index: 1;
background-color: blue;
}
En este ejemplo, se crean dos elementos div con ids “element1” y “element2”. El elemento “element1” tiene un z-index de 2 y un fondo rojo, mientras que el elemento “element2” tiene un z-index de 1 y un fondo azul.
Como el elemento “element1” tiene un z-index más alto, se mostrará encima del elemento “element2” y se verá como un cuadrado rojo encima de un cuadrado azul.
Más ejemplos:
Aquí tienes algunos ejemplos adicionales de cómo se puede utilizar la propiedad z-index en diferentes situaciones:
Crear un menú desplegable:
<div id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div id="overlay"></div>
#menu {
position: relative;
z-index: 2;
}
#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
display: none;
}
En este ejemplo, el menú tiene un z-index de 2 y un overlay tiene un z-index de 1. El overlay se usa para oscurecer la pantalla cuando el menú se despliega, y se asegura que el menú siempre se mostrará encima del overlay, independientemente de su posición en el HTML.
Crear una capa de elementos flotantes:
<div id="main-content">
<p>Contenido principal</p>
</div>
<div id="floating-box">
<p>Elemento flotante</p>
</div>
#main-content {
position: relative;
z-index: 1;
} #floating-box {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
background-color: #eee;
padding: 10px;
}
En este ejemplo, el contenido principal tiene un z-index de 1 y el elemento flotante tiene un z-index de 2. El elemento flotante se posicionará absolutamente en la esquina superior derecha de la pantalla y se mostrará encima del contenido principal debido a su z-index más alto.
Crear una ventana modal
<div id="modal">
<p>Contenido del modal</p>
<button id="close-modal">Cerrar</button>
</div>
#modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
background-color: #fff;
padding: 20px;
display: none;
}
En este ejemplo, el modal tiene un z-index de 2. El modal se mostrará encima de todos los demás elementos en la página debido a su z-index más alto, y se posicionará en el centro de la pantalla. El contenido de la página se oscurecerá y se desactivará la interacción con los elementos debajo del modal.
Estos son solo algunos ejemplos de cómo se puede utilizar la propiedad z-index en CSS. Hay muchas otras maneras de utilizarlo, como crear capas de elementos en una animación, crear un efecto de parallax, entre otros.
La propiedad z-index es muy útil para controlar la superposición de elementos en una página web y hacer que tu diseño sea más atractivo y fácil de usar.
Overflow en CSS
visible: El contenido se muestra fuera de los límites del elemento. (Es el valor predeterminado)
hidden: El contenido que se sale de los límites del elemento se oculta y no es visible.
scroll: Se agrega una barra de desplazamiento al elemento para que el usuario pueda ver el contenido que se sale de los límites.
auto: Se agrega una barra de desplazamiento solo si el contenido se sale de los límites.
También se puede especificar el comportamiento de overflow en ejes x y y utilizando las propiedades overflow-x y overflow-y respectivamente.
Ejemplo de uso
Aquí tienes un ejemplo de cómo utilizar la propiedad overflow en una sección de una página web. En este ejemplo se establece que el contenido que se sale de los límites de la sección debe ser ocultado y se agrega una barra de desplazamiento.
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecer overflow en hidden y agregar una barra de desplazamiento */
#section {
width: 200px;
height: 100px;
overflow: hidden;
overflow-y: scroll;
}
</style>
</head>
<body>
<h2>Ejemplo de overflow</h2>
<div id="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor suscipit ipsum eget congue. Proin id elit euismod, convallis ipsum eget, congue augue. Sed id euismod augue. Sed euismod quis augue a malesuada. Sed viverra congue magna, id malesuada quam bibendum eu. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod.</p>
</div>
</body>
</html>
Probar el código ahora
En este ejemplo se establece una sección con un ancho de 200px y un alto de 100px, y se especifica que el contenido que se sale de los límites de la sección debe ser ocultado y se agrega una barra de desplazamiento en el eje y para que el usuario pueda ver el contenido que se sale de los límites.
overflow: visible
La opción overflow: visible; es el valor predeterminado de la propiedad overflow en CSS. Significa que el contenido que se sale de los límites del elemento se mostrará y no será ocultado.
Aquí tienes un ejemplo de cómo usar overflow: visible; en una sección de una página web:
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecer overflow en visible */
#section {
width: 200px;
height: 100px;
overflow: visible;
}
</style>
</head>
<body>
<h2>Ejemplo de overflow</h2>
<div id="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor suscipit ipsum eget congue. Proin id elit euismod, convallis ipsum eget, congue augue. Sed id euismod augue. Sed euismod quis augue a malesuada. Sed viverra congue magna, id malesuada quam bibendum eu. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod.</p>
</div>
</body>
</html>
Probar el código ahora
En este ejemplo se establece una sección con un ancho de 200px y un alto de 100px, y se especifica que el contenido que se sale de los límites de la sección debe ser visible.
Es importante mencionar que puede ocasionar problemas de diseño y de accesibilidad en tu sitio web, ya que si tu contenido se sale de los límites de tu elemento, puede que esto afecte a la estética de tu sitio o que los usuarios no puedan ver todo el contenido que deseas que vean.
overflow: hidden
La opción overflow: hidden; significa que el contenido que se sale de los límites del elemento se ocultará y no será visible. Aquí tienes un ejemplo de cómo usar overflow: hidden; en una sección de una página web:
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecer overflow en hidden */
#section {
width: 200px;
height: 100px;
overflow: hidden;
}
</style>
</head>
<body>
<h2>Ejemplo de overflow</h2>
<div id="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor suscipit ipsum eget congue. Proin id elit euismod, convallis ipsum eget, congue augue. Sed id euismod augue. Sed euismod quis augue a malesuada. Sed viverra congue magna, id malesuada quam bibendum eu. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod.</p>
</div>
</body>
</html>
Probar el código ahora
En este ejemplo se establece una sección con un ancho de 200px y un alto de 100px, y se especifica que el contenido que se sale de los límites de la sección debe ser ocultado y no será visible.
overflow: scroll
La opción overflow: scroll; significa que se agregará una barra de desplazamiento al elemento para que el usuario pueda ver el contenido que se sale de los límites. Aquí tienes un ejemplo de cómo usar overflow: scroll; en una sección de una página web:
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecer overflow en scroll */
#section {
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Ejemplo de overflow</h2>
<div id="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor suscipit ipsum eget congue. Proin id elit euismod, convallis ipsum eget, congue augue. Sed id euismod augue. Sed euismod quis augue a malesuada. Sed viverra congue magna, id malesuada quam bibendum eu. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod.</p>
</div>
</body>
</html
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecer overflow en scroll */
#section {
width: 200px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<h2>Ejemplo de overflow</h2>
<div id="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor suscipit ipsum eget congue. Proin id elit euismod, convallis ipsum eget, congue augue. Sed id euismod augue. Sed euismod quis augue a malesuada. Sed viverra congue magna, id malesuada quam bibendum eu. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod.</p>
</div>
</body>
</html>
Probar el código ahora
En este ejemplo se establece una sección con un ancho de 200px y un alto de 100px, y se especifica que se agregará una barra de desplazamiento al elemento para que el usuario pueda ver el contenido que se sale de los límites.
overflow: auto
La opción overflow: auto; significa que se agregará una barra de desplazamiento al elemento solo si el contenido se sale de los límites. Es decir, si el contenido cabe dentro del elemento, no se mostrarán las barras de desplazamiento.
Aquí tienes un ejemplo de cómo usar overflow: auto; en una sección de una página web:
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecer overflow en auto */
#section {
width: 200px;
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<h2>Ejemplo de overflow</h2>
<div id="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor suscipit ipsum eget congue. Proin id elit euismod, convallis ipsum eget, congue augue. Sed id euismod augue. Sed euismod quis augue a malesuada. Sed viverra congue magna, id malesuada quam bibendum eu. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod.</p>
</div>
</body>
</html>
Probar el código ahora
En este ejemplo se establece una sección con un ancho de 200px y un alto de 100px, y se especifica que se agregará una barra de desplazamiento al elemento solo si el contenido se sale de los límites.
Propiedades relacionadas
Existen varias propiedades relacionadas con overflow en CSS que te permiten controlar el comportamiento del contenido que se sale de los límites del elemento. Algunas de ellas son:
overflow-x: Especifica el comportamiento del contenido que se sale de los límites del elemento en el eje horizontal.
overflow-y: Especifica el comportamiento del contenido que se sale de los límites del elemento en el eje vertical.
Cada una de estas propiedades tiene sus propios valores y comportamientos específicos y se pueden utilizar para lograr un control preciso sobre el contenido que se sale de los límites del elemento.
overflow-x
La propiedad overflow-x en CSS se utiliza para especificar el comportamiento del contenido que se sale de los límites del elemento en el eje horizontal (o eje x). Puedes utilizar varios valores para esta propiedad, como visible, hidden, scroll, auto. Aquí tienes un ejemplo de cómo usar overflow-x: hidden; en una sección de una página web:
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecer overflow-x en hidden */
#section {
width: 200px;
height: 100px;
overflow-x: hidden;
}
</style>
</head>
<body>
<h2>Ejemplo de overflow-x</h2>
<div id="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor suscipit ipsum eget congue. Proin id elit euismod, convallis ipsum eget, congue augue. Sed id euismod augue. Sed euismod quis augue a malesuada. Sed viverra congue magna, id malesuada quam bibendum eu. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod.</p>
</div>
</body>
</html>
Probar el código ahora
En este ejemplo se establece una sección con un ancho de 200px y un alto de 100px, y se especifica que el contenido que se sale de los límites de la sección en el eje horizontal debe ser ocultado y no será visible.
overflow-y
La propiedad overflow-y en CSS se utiliza para especificar el comportamiento del contenido que se sale de los límites del elemento en el eje vertical (o eje y). Puedes utilizar varios valores para esta propiedad, como visible, hidden, scroll, auto. Aquí tienes un ejemplo de cómo usar overflow-y: scroll; en una sección de una página web:
<!DOCTYPE html>
<html>
<head>
<style>
/* Establecer overflow-y en scroll */
#section {
width: 200px;
height: 100px;
overflow-y:
scroll;
}
</style>
</head>
<body>
<h2>Ejemplo de overflow-y</h2>
<div id="section">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor suscipit ipsum eget congue. Proin id elit euismod, convallis ipsum eget, congue augue. Sed id euismod augue. Sed euismod quis augue a malesuada. Sed viverra congue magna, id malesuada quam bibendum eu. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod. Sed euismod augue vel velit viverra, a malesuada velit euismod.</p>
</div>
</body>
</html>
Probar el código ahora
En este ejemplo se establece una sección con un ancho de 200px y un alto de 100px, y se especifica que se agregará una barra de desplazamiento al elemento solo en el eje vertical para que el usuario pueda ver el contenido que se sale de los límites. NOTA: Puedes usar overflow-x junto con overflow-y para controlar el comportamiento del contenido que se sale de los límites del elemento en ambos ejes. Por ejemplo, si deseas que solo se agregue una barra de desplazamiento horizontal para un elemento, y ocultar el contenido que se sale de los límites en el eje vertical, puedes usar:
#section {
width: 200px;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
}
Float en CSS
La propiedad float en CSS se utiliza para especificar cómo debe flotar un elemento en relación a los elementos que lo rodean. Un elemento con float: left se moverá hacia la izquierda del contenedor y los elementos posteriores se situarán a su alrededor.
Un elemento con float: right se moverá hacia la derecha del contenedor y los elementos posteriores se situarán a su alrededor.
Ejemplo de uso
Un ejemplo de uso de la propiedad float en CSS es crear una página con dos columnas: una columna lateral para el menú de navegación y otra columna principal para el contenido. Se puede lograr esto utilizando la siguiente estructura HTML:
<div id="container">
<div id="nav">
<!-- Contenido del menú de navegación -->
</div>
<div id="main">
<!-- Contenido principal -->
</div>
</div>
Y utilizando CSS para darle estilo a los elementos:
#nav {
float: left;
width: 20%;
/* Ancho del menú de navegación */
}
#main {
float: right;
width: 80%;
/* Ancho del contenido principal */
}
Con esto, el elemento con id “nav” se moverá a la izquierda y ocupará el 20% del ancho del contenedor, mientras que el elemento con id “main” se moverá a la derecha y ocupará el 80% del ancho del contenedor. Los elementos posteriores se colocarán alrededor de estos dos elementos flotantes.
Valores
La propiedad float en CSS tiene dos posibles valores:
left: Este valor indica que el elemento debe flotar hacia la izquierda del contenedor y los elementos posteriores se situarán a su alrededor.
right: Este valor indica que el elemento debe flotar hacia la derecha del contenedor y los elementos posteriores se situarán a su alrededor.
Además de estos dos valores, también existe un valor especial llamado none, el cual es el valor predeterminado y significa que el elemento no flotará y se mostrará en su posición original dentro del flujo del documento.
Otro valor es inherit que permite que el elemento herede el valor de float de su elemento padre.
Los valores de la propiedad float en CSS permiten especificar cómo debe flotar un elemento en relación a los elementos que lo rodean, ya sea hacia la izquierda, hacia la derecha o ninguno, y puede ser utilizado para crear diseños de layout flexibles y adaptativos.
Ejemplos
Ejemplo de uso de float: left; en CSS:
<div id="container">
<div id="nav">Menú de navegación</div>
<div id="main">Contenido principal</div>
</div>
#nav {
float: left;
/* el elemento "nav" se moverá a la izquierda del contenedor */
width: 20%;
/* el ancho del elemento "nav" será del 20% del contenedor */
} #main {
width: 80%;
/* el ancho del elemento "main" será del 80% del contenedor */
}
Ejemplo de uso de float: right; en CSS:
<div id="container">
<div id="main">Contenido principal</div>
<div id="sidebar">Barra lateral</div>
</div>
#main {
float: right;
/* el elemento "main" se moverá a la derecha del contenedor */
width: 80%;
/* el ancho del elemento "main" será del 80% del contenedor */
}
#sidebar {
float: right;
/* el elemento "sidebar" se moverá a la derecha del contenedor */
width: 20%;
/* el ancho del elemento "sidebar" será del 20% del contenedor */
}
<span style="color: initial"> </span>
Ejemplo de uso de float: none; en CSS:
<div id="container">
<div id="box">Caja sin flotar</div>
</div>
#box {
float: none;
/* el elemento "box" no se moverá y se comportará como si la propiedad "float" no estuviera establecida */
}
Ejemplo de uso de float: inherit; en CSS:
<div id="container">
<div id="parent">
<div id="child">Elemento hijo</div>
</div>
div>
#parent {
float: left;
/* el elemento "parent" se moverá a la izquierda del contenedor */
}
#child {
float: inherit;
/* el elemento "child" heredará el valor de la propiedad "float" de su elemento padre */
}
Es importante mencionar que los ejemplos solo muestra la propiedad float, pero en una página real deberías tener en cuenta otros aspectos como el tamaño, margen y padding de los elementos, para lograr un diseño adecuado.
Más ejemplos:
Aquí hay algunos ejemplos adicionales de cómo se puede utilizar la propiedad float en CSS:
Crear una barra lateral a la derecha de un contenedor:
<div id="container">
<div id="main">Contenido principal</div>
<div id="sidebar">Barra lateral</div>
</div>
<span style="color: initial"></span>
#sidebar {
float: right;
/* el elemento "sidebar" se moverá a la derecha del contenedor */
width: 20%;
/* el ancho del elemento "sidebar" será del 20% del contenedor */
}
#main {
width: 80%;
/* el ancho del elemento "main" será del 80% del contenedor */
}
Crear una estructura de página con tres columnas:
<div id="container">
<div id="col1">Columna 1</div>
<div id="col2">Columna 2</div>
<div id="col3">Columna 3</div>
</div>
#col1 {
float: left;
/* el elemento "col1" se moverá a la izquierda del contenedor */
width: 33%;
/* el ancho del elemento "col1" será del 33% del contenedor */
}
#col2 {
float: left;
/* el elemento "col2" se moverá a la izquierda del contenedor */
width: 33%;
/* el ancho del elemento "col2" será del 33% del contenedor */
}
#col3 {
float: left; /* el elemento "col3" se moverá a la izquierda del contenedor */
width: 33%;
/* el ancho del elemento "col3" será del 33% del contenedor */ }
Crear una estructura de página con una imagen y un texto al lado:
<div id="container">
<img id="image" src="image.jpg">
<div id="text">Texto descriptivo</div>
</div>
#image {
float: left;
/* el elemento "image" se moverá a la izquierda del contenedor */
width: 30%;
/* el ancho del elemento "image" será del 30% del contenedor */
}
#text {
float: left;
/* el elemento "text" se moverá a la izquierda del contenedor */
width: 70%;
/* el ancho del elemento "text" será del 70% del contenedor */
}
Espero que estos ejemplos te ayuden a entender mejor cómo se puede utilizar la propiedad float en CSS para crear diseños de página más complejos.
No olvides que cuando se utiliza la propiedad float, es importante tener en cuenta cómo se comportan los elementos que siguen después de los elementos flotantes, ya que pueden verse afectados por la posición de los elementos flotantes. Es recomendable utilizar técnicas como el uso de clearfix o overflow: hidden para evitar problemas de diseño. También es importante mencionar que la propiedad float es útil para crear diseños de página con columnas laterales, pero no es la única forma de hacerlo. En CSS3 existe la propiedad Flexbox y Grid Layout que son más adecuadas para diseños de página con múltiples columnas y que son más fáciles de trabajar que con float.
Clear en CSS
Valores
Los valores válidos para esta propiedad son:
left: El elemento no aparecerá a la izquierda de ningún elemento flotante anterior.
right: El elemento no aparecerá a la derecha de ningún elemento flotante anterior.
both: El elemento no aparecerá a la izquierda ni a la derecha de ningún elemento flotante anterior.
none: El elemento se comportará como si la propiedad clear no estuviera establecida. Este es el valor por defecto.
inherit: El elemento heredará el valor de la propiedad clear de su elemento padre.
Ejemplo de uso
Un ejemplo de uso de la propiedad clear podría ser:
<div id="container">
<div id="float-left"> elemento flotando a la izquierda</div>
<div id="clear-both"> elemento con clear: both</div>
</div>
#float-left {
float: left;
}
#clear-both {
clear: both;
/* el elemento con id "clear-both" no aparecerá a la izquierda ni a la derecha del elemento flotante anterior */
}
En este caso el elemento con id “clear-both” no aparecerá a la izquierda ni a la derecha del elemento flotante anterior, evitando así la superposición de elementos.
Es importante mencionar que existen otras técnicas para evitar problemas de superposición como el uso de overflow: hidden o clearfix.
Más ejemplos:
Aquí hay algunos ejemplos de cómo se puede utilizar la propiedad clear en CSS:
Utilizando clear: left; para evitar que un elemento se superponga a un elemento flotante a la izquierda:
<html>
<head>
<style>
/* estilos para los elementos flotantes */
.float-left {
float: left;
width: 50%;
background-color: #f0f0f0;
padding: 10px;
}
/* estilos para el elemento con clear */
.clear-left {
clear: left;
/* el elemento con id "clear-left" no aparecerá a la izquierda del elemento flotante anterior */
width: 100%;
background-color: #ffffff;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="float-left">elemento flotando a la izquierda</div>
<div class="float-left">elemento flotando a la izquierda</div>
<div class="clear-left">elemento con clear: left</div>
<div class="float-left">elemento flotando a la izquierda</div>
<div class="float-left">elemento flotando a la izquierda</div>
</div>
</body>
</html>
En este ejemplo, el elemento con clase «clear-left» no aparecerá a la izquierda de ningún elemento flotante anterior, evitando así la superposición de elementos. <div id="container">
<div id="float-left"> elemento flotando a la izquierda</div>
<div id="clear-both"> elemento con clear: both</div>
</div>
#float-left {
float: left;
}
#clear-both {
clear: both;
/* el elemento con id "clear-both" no aparecerá a la izquierda ni a la derecha del elemento flotante anterior */
}
En este caso el elemento con id “clear-both” no aparecerá a la izquierda ni a la derecha del elemento flotante anterior, evitando así la superposición de elementos.
Es importante mencionar que existen otras técnicas para evitar problemas de superposición como el uso de overflow: hidden o clearfix.
Más ejemplos:
Aquí hay algunos ejemplos de cómo se puede utilizar la propiedad clear en CSS:
Utilizando clear: left; para evitar que un elemento se superponga a un elemento flotante a la izquierda:
<html>
<head>
<style>
/* estilos para los elementos flotantes */
.float-left {
float: left;
width: 50%;
background-color: #f0f0f0;
padding: 10px;
}
/* estilos para el elemento con clear */
.clear-left {
clear: left;
/* el elemento con id "clear-left" no aparecerá a la izquierda del elemento flotante anterior */
width: 100%;
background-color: #ffffff;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="float-left">elemento flotando a la izquierda</div>
<div class="float-left">elemento flotando a la izquierda</div>
<div class="clear-left">elemento con clear: left</div>
<div class="float-left">elemento flotando a la izquierda</div>
<div class="float-left">elemento flotando a la izquierda</div>
</div>
</body>
</html>
En este ejemplo, el elemento con clase «clear-left» no aparecerá a la izquierda de ningún elemento flotante anterior, evitando así la superposición de elementos.
Utilizando clear: right; para evitar que un elemento se superponga a un elemento flotante a la derecha:
<html>
<head>
<style>
/* estilos para los elementos flotantes */
.float-right {
float: right;
width: 50%;
background-color: #f0f0f0;
padding: 10px;
}
/* estilos para el elemento con clear */
.clear-right {
clear: right;
/* el elemento con id "clear-right" no aparecerá a la derecha del elemento flotante anterior */
width: 100%;
background-color: #ffffff;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="float-right">elemento flotando a la derecha</div>
<div class="float-right">elemento flotando a la derecha</div>
<div class="clear-right">elemento con clear: right</div>
<div class="float-right">elemento flotando a la derecha</div> <div class="float-right">elemento flotando a la derecha</div>
</div>
</body>
</html>
En este ejemplo, el elemento con clase «clear-right» no aparecerá a la derecha de ningún elemento flotante anterior, evitando así la superposición de elementos.
Utilizando clear: both; para evitar que un elemento se superponga a ambos lados de los elementos flotantes:
<html>
<head>
<style>
/* estilos para los elementos flotantes */
.float {
width: 50%;
background-color: #f0f0f0;
padding: 10px;
}
/* estilos para el elemento con clear */
.clear-both {
clear: both;
/* el elemento con id "clear-both" no aparecerá a la izquierda ni a la derecha del elemento flotante anterior */
width: 100%;
backgroundcolor: #ffffff;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="float" style="float: left;">elemento flotando a la izquierda</div>
<div class="float" style="float: right;">elemento flotando a la derecha</div>
<div class="clear-both">elemento con clear: both</div>
<div class="float" style="float: left;">elemento flotando a la izquierda</div>
<div class="float" style="float: right;">elemento flotando a la derecha</div>
</div>
</body>
</html>
En este ejemplo, el elemento con clase “clear-both” no aparecerá a la izquierda ni a la derecha de ningún elemento flotante anterior, evitando así la superposición de elementos.
Espero que estos ejemplos te ayuden a entender mejor cómo se puede utilizar la propiedad clear en CSS para evitar problemas de superposición de elementos flotantes.
Opacity en CSS
El valor de opacity se aplica a todo el elemento, incluyendo su contenido y bordes. Si deseas establecer una transparencia diferente para el fondo y el contenido de un elemento, puedes utilizar la propiedad background-color con una notación RGBA (Red, Green, Blue, Alpha) para establecer la transparencia solo para el fondo del elemento.
Ejemplo de uso
Un ejemplo de uso de la propiedad opacity podría ser:
<div id="container">
<div id="opacity-element" style="background-color: #f0f0f0;">
elemento con opacity: 0.5</div>
</div>
#opacity-element {
opacity: 0.5;
/* elemento con transparencia del 50% */
}
En este ejemplo, el elemento con id “opacity-element” tendrá una transparencia del 50% y su contenido y bordes también se verán afectados.
Es importante mencionar que la propiedad opacity afectará también a los eventos de hover, es decir, si se tiene un evento de hover sobre un elemento con opacity menor a 1, este evento no se ejecutará correctamente.
Más ejemplos:
Aquí hay algunos ejemplos adicionales de cómo se puede utilizar la propiedad opacity en CSS y HTML:
Estableciendo una transparencia del 75% para un botón:
<html>
<head>
<style>
#transparent-button {
opacity: 0.75;
/* botón con transparencia del 75% */
background-color: #4CAF50;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<button id="transparent-button"> Botón semitransparente</button>
</div>
</body>
</html>
En este ejemplo, el botón con id “transparent-button” tendrá una transparencia del 75% y su contenido y bordes también se verán afectados.
Estableciendo una transparencia del 50% para un elemento de lista:
<html>
<head>
<style>
#transparent-list li{
opacity: 0.5;
/* elementos de la lista con transparencia del 50% */
list-style-type: none;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">
<ul id="transparent-list">
<li> primer elemento de la lista</li>
<li> segundo elemento de la lista</li>
<li> tercer elemento de la lista</li>
ul>
</div>
</body>
</html>
En este ejemplo, los elementos de la lista con id “transparent-list” tendrán una transparencia del 50% y su contenido y bordes también se verán afectados.
Utilizando transiciones para cambiar la transparencia de un elemento al hacer hover:
<html>
<head>
<style>
#transparent-card {
background-color: #f0f0f0;
width: 300px;
padding: 20px;
opacity: 0.5;
/* elemento con transparencia del 50% */
transition: opacity 0.5s ease;
/* transición suave para cambiar la transparencia */
}
#transparent-card:hover {
opacity: 1;
/* elemento con transparencia del 100% al hacer hover */
}
</style>
</head>
<body>
<div id="container">
Contenido del elemento transparente
</div>
</div>
</body>
</html>
En este ejemplo, el elemento con id “transparent-card” tendrá una transparencia del 50% y al hacer hover sobre él, su transparencia cambiará a 100% suavemente gracias a la transición.
Espero que estos ejemplos te ayuden a entender mejor cómo se puede utilizar la propiedad opacity en CSS para establecer la transparencia de elementos en tu sitio web.
