Guía Completa sobre CSS Display y Position

Si estás aprendiendo CSS, seguramente te has encontrado con los conceptos de display y position. Estas propiedades son fundamentales para controlar la disposición de los elementos en una página web. En este artículo, exploraremos cómo funcionan y cómo puedes usarlas para diseñar interfaces responsivas y atractivas.

1. Propiedad display en CSS

La propiedad display determina cómo se muestra un elemento en la página. Existen varios valores importantes que debes conocer:

display: block;

Los elementos con display: block; ocupan todo el ancho disponible y se muestran en una nueva línea. Ejemplos de elementos con este comportamiento por defecto son <div>, <p> y <h1>.

.block-example {
    display: block;
    background-color: lightblue;
    padding: 10px;
}

display: inline;

Los elementos inline ocupan solo el espacio necesario y no comienzan en una nueva línea. Ejemplo: <span> y <a>.

.inline-example {
    display: inline;
    background-color: yellow;
}

display: inline-block;

Este valor combina características de inline y block. Permite establecer dimensiones (width y height) sin forzar un salto de línea.

.inline-block-example {
    display: inline-block;
    width: 150px;
    height: 50px;
    background-color: green;
    color: white;
    text-align: center;
    line-height: 50px;
}

display: none;

Oculta el elemento sin eliminarlo del DOM.

.hidden-example {
    display: none;
}

---

2. Propiedad position en CSS

La propiedad position define cómo se posiciona un elemento en el flujo del documento. Sus valores principales son:

position: static; (Por defecto)

Los elementos siguen el flujo normal del documento.

.static-example {
    position: static;
}

position: relative;

El elemento se posiciona en relación con su posición original.

.relative-example {
    position: relative;
    top: 20px;
    left: 10px;
}

position: absolute;

El elemento se posiciona respecto al primer ancestro con position: relative;.

.absolute-example {
    position: absolute;
    top: 50px;
    left: 100px;
}

position: fixed;

El elemento se mantiene fijo en la pantalla sin importar el desplazamiento de la página.

.fixed-example {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: red;
}

position: sticky;

El elemento se comporta como relative hasta que se alcanza un cierto punto de desplazamiento, donde se vuelve fixed.

.sticky-example {
    position: sticky;
    top: 0;
    background-color: orange;
}

---

Conclusión

Dominar display y position en CSS es clave para estructurar tus páginas de forma eficiente. Con estas propiedades, puedes organizar el contenido de tu sitio web de manera flexible y responsiva. ¡Empieza a experimentar con ellas y mejora tus diseños web!