Formato visual básico y posicionamiento

CSS no trata solo de colores, fuentes y bordes.

También controla cómo se colocan los elementos en la página. Algunos elementos se apilan en nuevas líneas. Otros se colocan dentro de una línea de texto. Algunos elementos pueden moverse desde su posición normal.

En esta lección, aprenderás los conceptos básicos del flujo del documento, display y posicionamiento simple.

Por qué importa el formato visual

HTML le da estructura a tu página.

CSS decide cómo se ve esa estructura en la pantalla. Por ejemplo, quizás quieras que un enlace con aspecto de botón se coloque junto a otro enlace, o que una pequeña insignia aparezca en la esquina de una tarjeta.

Para hacerlo, necesitas entender cómo se comportan los elementos antes de intentar moverlos.

Qué significa document flow

Document flow es la forma normal en que el navegador coloca los elementos en la página.

En inglés y en muchos otros idiomas, el contenido normalmente fluye de izquierda a derecha y de arriba hacia abajo. Los elementos aparecen en el mismo orden que en tu HTML, a menos que CSS cambie ese comportamiento.

Muchos problemas de layout para principiantes ocurren cuando el flujo natural es diferente de lo que esperabas.

Elementos block

Un elemento block empieza en una línea nueva.

Por defecto, ocupa todo el ancho disponible de su contenedor padre. El siguiente elemento empieza debajo.

Elementos block comunes incluyen:

• <div>
• <p>
• <h1>
• <section>

<div class="block-example">Primer bloque</div>
<div class="block-example">Segundo bloque</div>

<style>
  .block-example {
    display: block;
    margin-bottom: 8px;
    padding: 12px;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
    font-family: Arial, sans-serif;
  }
</style>

Aunque el texto sea corto, cada bloque empieza en su propia línea.

Elementos inline

Un elemento inline se coloca dentro de la línea actual.

Solo ocupa el ancho que necesita su contenido. Los elementos inline se comportan como palabras dentro de una oración.

Elementos inline comunes incluyen:

• <span>
• <a>
• <strong>
• <em>

<p class="inline-demo">
  Este párrafo tiene
  <span class="inline-example">texto inline</span>
  dentro de una oración.
</p>

<style>
  .inline-demo {
    font-family: Arial, sans-serif;
  }

  .inline-example {
    display: inline;
    width: 200px;
    height: 80px;
    padding: 4px;
    background-color: #fef3c7;
    border: 1px solid #d97706;
  }
</style>

Observa que width y height no controlan el elemento inline como lo harían en un elemento block.

Elementos inline-block

inline-block es una opción intermedia muy útil.

Un elemento inline-block puede colocarse junto a otro contenido como un elemento inline. También puede usar width, height, padding y margins de forma más predecible, como un elemento block.

<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>

<style>
  .tag {
    display: inline-block;
    width: 110px;
    padding: 10px;
    margin: 4px;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    text-align: center;
  }
</style>

Esto es útil para insignias, enlaces pequeños de navegación, etiquetas y elementos simples con aspecto de botón.

Comparando block, inline e inline-block

• display: block empieza en una línea nueva y puede usar width y height.
• display: inline permanece en una línea de texto y no usa width y height de la forma normal.
• display: inline-block se coloca en una línea, pero respeta width y height.

<div class="display-demo">
  <div class="item block-item">block</div>
  <span class="item inline-item">inline</span>
  <span class="item inline-item">inline</span>
  <span class="item inline-block-item">inline-block</span>
  <span class="item inline-block-item">inline-block</span>
</div>

<style>
  .display-demo {
    font-family: Arial, sans-serif;
  }

  .item {
    width: 130px;
    height: 44px;
    margin: 6px;
    padding: 8px;
    border: 2px solid #4b5563;
    background-color: #f3f4f6;
  }

  .block-item {
    display: block;
  }

  .inline-item {
    display: inline;
    background-color: #fee2e2;
  }

  .inline-block-item {
    display: inline-block;
    background-color: #dbeafe;
  }
</style>

Las mismas reglas de width y height se comportan de forma diferente porque los valores de display son diferentes.

Qué significa positioning

La propiedad position controla si un elemento permanece en el flujo normal o se mueve fuera de él.

El posicionamiento usa propiedades de desplazamiento:

• top
• right
• bottom
• left

Estas propiedades solo funcionan cuando el elemento tiene un valor de position que admite desplazamientos.

Esta lección cubre static, relative y absolute. También existen fixed y sticky, que se verán en una lección posterior.

Posicionamiento static

position: static es el valor predeterminado para los elementos HTML.

Un elemento static sigue el flujo normal del documento. Las propiedades de desplazamiento no tienen efecto sobre él.

La mayoría de los elementos deberían permanecer static, a menos que tengas una razón clara para moverlos.

Posicionamiento relative

position: relative mantiene el elemento en el flujo normal.

Después de eso, puedes usar top, right, bottom o left para moverlo visualmente desde su posición original.

<div class="row">Elemento normal</div>
<div class="row moved-item">Elemento relative</div>
<div class="row">Elemento normal</div>

<style>
  .row {
    width: 180px;
    margin-bottom: 8px;
    padding: 10px;
    background-color: #e5e7eb;
    border: 1px solid #6b7280;
    font-family: Arial, sans-serif;
  }

  .moved-item {
    position: relative;
    left: 30px;
    background-color: #fde68a;
  }
</style>

El elemento relative se mueve hacia la derecha, pero el navegador todavía conserva su espacio original en el flujo.

Posicionamiento absolute

position: absolute elimina un elemento del flujo normal.

Los demás elementos actúan como si el elemento con position absolute no ocupara espacio normal.

El posicionamiento absolute es útil para pequeños detalles colocados con precisión, como insignias, etiquetas, iconos y botones de cierre.

No es una buena herramienta para construir todo el layout de una página.

El padre posicionado más cercano

Un elemento con position absolute necesita un punto de referencia.

Busca el ancestro más cercano con un valor de position distinto de static. Un padre con position: relative es la opción más común.

Si no encuentra un ancestro posicionado, usa la página como referencia. Eso suele hacer que el elemento aparezca lejos de donde esperabas.

Ejemplo ejecutable: insignia en una tarjeta

En este ejemplo, la tarjeta es el padre posicionado y la insignia es el hijo absoluto.

<div class="profile-card">
  <strong>Curso CSS</strong>
  <span class="lesson-badge">Nuevo</span>
</div>

<style>
  .profile-card {
    position: relative;
    width: 220px;
    padding: 32px 20px;
    background-color: #f9fafb;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    text-align: center;
  }

  .lesson-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: #dc2626;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
  }
</style>

La insignia usa la tarjeta como referencia porque .profile-card tiene position: relative.

Errores comunes de principiantes

• Añadir width y height a elementos inline: usa inline-block o block cuando necesites tamaños predecibles.
• Usar absolute positioning para todo el layout: usa primero el flujo normal. Más adelante, Flexbox y Grid serán mejores herramientas para el layout de páginas.
• Olvidar el padre posicionado: añade position: relative al padre cuando un hijo absolute deba colocarse dentro de él.
• Esperar que relative positioning mueva otros elementos: un elemento con position relative conserva su espacio original en el flujo.
• Usar offsets en elementos static: top, right, bottom y left no afectan a position: static.

Mini tarea práctica

Imagina un .badge con position: absolute, colocado dentro de una .card que tiene el valor predeterminado position: static.

¿Qué elemento usará la insignia como referencia de posicionamiento?

Revisa las respuestas del quiz cuando estés listo.

Quiz corto con respuestas

1. ¿Qué valor de display permite que los elementos se coloquen uno al lado del otro y aun así respeten width y height?
2. ¿Cuál es el valor predeterminado de position para los elementos HTML?
3. ¿Qué hace position: relative con el espacio original del elemento en el flujo normal?

Respuestas:

1. inline-block.
2. static.
3. El espacio original queda reservado, aunque el elemento se mueva visualmente.

Respuesta de la mini tarea práctica: como .card es static (no está posicionada), la insignia la salta y busca más arriba el ancestro posicionado más cercano. Si no encuentra ninguno, se ancla a la página, lo que a menudo la coloca lejos de la tarjeta. Añade position: relative a .card para convertirla en la referencia.

Pequeño desafío

Da estilo a la tarjeta de notificación de abajo.

Tus objetivos:

• Haz que .card sea la referencia de posicionamiento.
• Haz que .new-badge tenga position absolute.
• Coloca la insignia en la esquina superior izquierda de la tarjeta.
• Dale a la insignia un fondo rojo y texto blanco.

<div class="card">
  Bandeja de entrada
  <span class="new-badge">Nuevo</span>
</div>

<style>
  .card {
    /* Haz que este elemento sea la referencia de posicionamiento */

    width: 200px;
    margin: 32px;
    padding: 40px;
    background-color: #f3f4f6;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    text-align: center;
  }

  .new-badge {
    /* Quita este elemento del flujo normal */

    /* Muévelo a la esquina superior izquierda */

    /* Añade un fondo rojo y texto blanco */

    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: bold;
  }
</style>

Resumen

• Document flow es la forma normal en que el navegador coloca elementos en la página.
• display: block empieza en una línea nueva y puede usar width y height.
• display: inline permanece en una línea de texto y no usa width y height de la forma normal.
• display: inline-block se coloca en una línea y aun así respeta width y height.
• position: static es el valor predeterminado, y los offsets no lo afectan.
• position: relative mueve un elemento visualmente mientras conserva su espacio original.
• position: absolute elimina un elemento del flujo normal.
• Un elemento con position absolute usa como referencia el ancestro posicionado más cercano.