MAQUETACIÓN WEB

CSS Display y Position

Cómo funciona el flujo del documento y cómo romperlo correctamente

Aprende cómo el navegador renderiza el layout. Domina display block vs inline, posicionamiento con relative, absolute y fixed, y controla la superposición con z-index para diseños web profesionales.

1

Elementos de Bloque y en Línea en HTML

HTML clasifica sus elementos según cómo ocupan el espacio en pantalla. Los elementos de bloque generan estructura vertical, mientras que los elementos en línea se integran dentro del texto sin romper el flujo visual.

<!-- Elemento de bloque: ocupa todo el ancho disponible -->
<div>Este es un div</div>

<!-- Elementos en línea: fluyen dentro del texto, uno al lado del otro -->
<span>Span uno</span>
<span>Span dos</span>
2

Cómo CSS Trata a Bloques e Inline

CSS aplica reglas distintas según el tipo de elemento. Los elementos inline tienen limitaciones importantes en tamaño y espaciado, mientras que los bloques permiten un control completo de la caja y el layout.

/* Los elementos inline NO respetan width ni height */
span {
  width: 200px;      /* Ignorado por ser inline */
  height: 100px;     /* Ignorado por ser inline */
  margin-top: 40px;  /* Solo afecta horizontalmente */
}
Limitaciones CSS en elementos inline
Los inline no responden como bloques.
3

Display Block: Elementos que Ocupan Toda la Línea

Los elementos con comportamiento block siempre comienzan en una nueva línea y se expanden horizontalmente. Son la base para construir la estructura vertical de cualquier página web

<!-- Cada div comienza en una nueva línea -->
<div>Bloque 1</div>
<div>Bloque 2</div>
<div>Bloque 3</div>

<!-- Aunque el contenido sea corto, el ancho es completo -->
4

Propiedades Clave de Display Block

Los elementos block aceptan ancho, alto, márgenes y padding en todas las direcciones. Este control total sobre la caja los convierte en el pilar del diseño de layouts en CSS.

.caja {
  display: block;        /* Comportamiento de bloque */
  width: 300px;          /* Se puede controlar el ancho */
  height: 120px;         /* Se puede controlar el alto */
  margin: 20px auto;     /* Margen vertical + centrado horizontal */
  padding: 16px;         /* Espacio interno en todas direcciones */
}
Caja con display block y propiedades de tamaño
Block permite controlar completamente la caja del elemento.
5

Modificar el Flujo con Display

La propiedad display permite cambiar el comportamiento visual de un elemento sin modificar su etiqueta HTML. Esto brinda flexibilidad para adaptar el layout sin perder semántica.

<!-- Un párrafo normalmente es block -->
<p class="texto-inline">Párrafo convertido a inline</p>

<!-- Un span normalmente es inline -->
<span class="caja-bloque">Span convertido a bloque</span>
6

Inline-Block: Flujo y Control

Inline-block combina el flujo horizontal de los elementos en línea con el control de tamaño de los bloques, siendo ideal para tarjetas, botones o listas alineadas.

.tarjeta {
  display: inline-block; /* Se alinea en línea pero acepta tamaño */
  width: 160px;          /* Ancho respetado */
  height: 80px;          /* Alto respetado */
  margin: 10px;          /* Espaciado completo */
}
Elementos inline-block alineados
Combina lo mejor de inline y block.
7

Ocultar Elementos en el Flujo

CSS permite ocultar elementos de distintas maneras. La diferencia clave está en si el elemento sigue ocupando espacio en el layout o desaparece por completo del flujo.

<!-- Este elemento será eliminado del layout -->
<div class="oculto-none">No renderizado</div>

<!-- Este elemento es invisible pero ocupa espacio -->
<div class="oculto-hidden">Invisible pero presente</div>
8

Display None vs Visibility Hidden

Aunque ambas propiedades ocultan elementos visualmente, solo display:none los elimina del layout. Elegir incorrectamente puede romper la estructura del diseño.

.oculto-none {
  display: none;        /* El elemento desaparece del layout */
}

.oculto-hidden {
  visibility: hidden;  /* El elemento sigue ocupando espacio */
}
Efecto visual de ocultar elementos
Elegir mal rompe el layout.
9

Position Static: El Punto de Partida

Todos los elementos HTML son static por defecto. Esto significa que respetan el flujo natural del documento y no responden a coordenadas como top o left.

<!-- Todos los elementos son static por defecto -->
<div class="caja-estatica">Caja estática</div>
Elemento static
Static ignora coordenadas.
10

Por Qué Top y Left No Funcionan

Las propiedades top y left solo funcionan cuando el elemento tiene una posición distinta de static. Entender esto evita uno de los errores más comunes en CSS.

.caja {
  position: relative; /* Habilita el uso de top y left */
  top: 50px;          /* Mueve el elemento hacia abajo */
  left: 50px;         /* Mueve el elemento hacia la derecha */
}
Top y left sin position
Sin position no hay coordenadas.
11

Position Relative: Movimiento Local

Relative permite desplazar un elemento respecto a su posición original sin sacarlo del flujo del documento, conservando el espacio que ocupaba inicialmente.

<!-- Elemento que será movido respecto a su lugar original -->
<div class="caja-relativa">Caja relativa</div>
Elemento relative
El espacio original se conserva.
12

Cómo Funciona Position Relative

Al usar position: relative se habilitan las coordenadas sin afectar a los demás elementos. Es la base para posicionar hijos con absolute de forma controlada.

.caja-relativa {
  position: relative; /* Permite mover sin salir del flujo */
  top: 20px;          /* Desplazamiento visual */
}
Publicidad
html-css-online-course-responsive-web-design-from-scratch
Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertosVer próximas fechas
13

Absolute: Fuera del Flujo

Position absolute saca al elemento del flujo normal y lo posiciona respecto a su contenedor más cercano con posición definida, permitiendo superposición controlada.

<!-- Contenedor principal -->
<div class="tarjeta">
  <!-- Elemento superpuesto -->
  <span class="badge">Nuevo</span>
  <p>Producto</p>
</div>
Elemento absolute en tarjeta
Padre relativo, hijo absoluto.
14

Cómo Funciona Position Absolute

Un elemento absolute se referencia siempre a su ancestro posicionado más cercano. Sin un padre con position, el navegador usará el viewport como referencia.

.tarjeta {
  position: relative; /* Define el contexto de posicionamiento */
}

.badge {
  position: absolute; /* Sale del flujo */
  top: 0;             /* Se ancla arriba */
  right: 0;           /* Se ancla a la derecha */
}
Absolute con padre relativo
Regla base del posicionamiento.
15

Position Fixed: Relativo al Viewport

Fixed posiciona un elemento respecto a la ventana del navegador. Permanece visible aunque el usuario haga scroll, ideal para menús o barras persistentes.

<!-- Barra que permanecerá visible al hacer scroll -->
<header class="barra-fija">Menú fijo</header>
16

Cómo Funciona Position Fixed

Los elementos fixed ignoran completamente el contenedor padre y se anclan al viewport. Su posición no se ve afectada por el scroll del documento.

.barra-fija {
  position: fixed; /* Se fija al viewport */
  top: 0;          /* Pegada arriba de la pantalla */
}
Fixed en CSS
Se ancla a la ventana.
17

Position Sticky: Flujo + Fijación

Sticky combina comportamientos de relative y fixed. El elemento fluye normalmente hasta que alcanza un umbral, momento en el que se fija temporalmente.

<!-- Título que se fijará al hacer scroll -->
<h2 class="titulo-sticky">Sección</h2>
Publicidad
html-css-online-course-responsive-web-design-from-scratch
Aprendé desde cero con clases 100% en vivo, grupos súper reducidos y acompañamiento real. Todo el contenido está diseñado y dictado por el creador de la plataforma, para que aprendas de verdad, sin videos fríos ni cursos masivos.

Curso de HTML y CSS para Frontend

Dominá las bases de la programación frontend: estructura con HTML, estilos modernos con CSS y diseño rápido con Tailwind para lanzar tus primeros sitios responsivos y profesionales.10 clases en vivo con profesores expertosVer próximas fechas
18

Cómo Funciona Position Sticky

Para que sticky funcione correctamente, el elemento necesita un valor top definido y un contenedor con altura suficiente que delimite su comportamiento.

.titulo-sticky {
  position: sticky; /* Comportamiento híbrido */
  top: 10px;        /* Umbral de fijación */
}
Sticky en CSS
Respeta los límites del padre.
19

Z-Index y Superposición

Cuando los elementos se superponen, z-index define cuál se renderiza por encima. Solo funciona en elementos posicionados y dentro del mismo contexto de apilamiento.

<!-- Capa base -->
<div class="capa base"></div>

<!-- Capa que se superpone -->
<div class="capa superior"></div>
Capas superpuestas
Mayor z-index, mayor prioridad.
20

Stacking Context y Modelo Mental Final

El stacking context crea jerarquías independientes que el z-index no puede romper. Comprender este modelo mental es clave para evitar bugs complejos de superposición.

.padre {
  position: relative; /* Crea un nuevo stacking context */
  z-index: 1;
}

.hijo {
  position: absolute; /* Está limitado al contexto del padre */
  z-index: 999;       /* No puede salir del contexto */
}
Stacking context
Pensar jerárquicamente evita bugs.

Lección anterior

Diagrama del CSS Box Model mostrando content, padding, border y margin
El Box Model explica cómo el navegador mide, separa y renderiza cada elemento en pantalla.

CSS Box Model

El Box Model es fundamental en CSS. Aprende cómo el navegador maneja cada elemento como una caja, el cálculo de dimensiones con padding y bordes, y evita errores comunes en tus layouts.

Comenzar Lección

Lección actual

Capas de elementos web mostrando flujo, superposición y posicionamiento en CSS
Dominar display y position es entender cómo el navegador piensa el layout.

CSS Display y Position

Aprende cómo el navegador renderiza el layout. Domina display block vs inline, posicionamiento con relative, absolute y fixed, y controla la superposición con z-index para diseños web profesionales.

Lección actual

Lección siguiente

Representación visual de ejes principales y transversales organizando elementos con CSS Flexbox
Flexbox permite al navegador distribuir y alinear elementos de forma inteligente según el espacio disponible.

CSS Flexbox: Arquitectura del Layout Flexible

Flexbox es clave para layouts modernos. Aprende a usar su sistema de ejes, distribuye el espacio y alinea elementos para crear interfaces responsive, limpias y profesionales con total control.

Comenzar Lección
¿Cuál es la diferencia principal entre `display: block` y `display: inline`?VLos elementos de bloque (`block`) ocupan todo el ancho disponible y comienzan en una nueva línea (como un `div` o `p`). Los elementos en línea (`inline`) solo ocupan el ancho de su contenido y se sitúan uno al lado del otro (como un `span` o `a`).
¿Por qué el `width` y `height` no funcionan en mi elemento `span`?VPorque los elementos `inline` (como `span`) ignoran las propiedades de dimensiones. Para que acepten ancho y alto, debes cambiar su propiedad a `display: block` o `display: inline-block`.
¿Para qué sirve `display: inline-block`?VEs un híbrido que permite que el elemento fluya horizontalmente con otros elementos (como texto), pero conservando la capacidad de definirle ancho, alto, márgenes y rellenos verticales (como una caja).
¿Qué diferencia hay entre `display: none` y `visibility: hidden`?V`display: none` elimina el elemento del renderizado, por lo que no ocupa espacio y el diseño se reajusta. `visibility: hidden` lo hace invisible, pero el elemento sigue ocupando su espacio físico en la página (queda un hueco vacío).
¿Cómo interactúa `opacity: 0` comparado con `visibility: hidden`?VAmbos hacen el elemento invisible. La diferencia clave es que con `opacity: 0` el elemento sigue siendo interactivo (se puede hacer clic en él), mientras que con `visibility: hidden` se desactiva la interactividad.
¿Qué hace `position: static`?VEs el valor por defecto de todos los elementos HTML. Indica que el elemento sigue el flujo natural del documento. Las propiedades `top`, `left`, `right`, `bottom` y `z-index` no tienen ningún efecto sobre él.
¿Qué ocurre si aplico `position: relative` sin definir coordenadas?VVisualmente, nada cambia; el elemento se queda en su lugar original. Sin embargo, ahora el elemento se convierte en un 'punto de referencia' para sus hijos que tengan `position: absolute`, y también habilita el uso de `z-index`.
¿Cómo funciona exactamente `position: absolute`?VSaca al elemento del flujo normal (ya no reserva espacio). Se posiciona en relación a su ancestro posicionado más cercano (cualquiera que no sea `static`). Si no encuentra ninguno, se posiciona relativo al documento (`html`).
¿Cuál es la regla 'Padre Relativo, Hijo Absoluto'?VEs una técnica estándar de diseño: al padre se le da `position: relative` (para que sea la referencia) y al hijo `position: absolute` para moverlo libremente dentro de los límites del padre.
¿Cómo centro vertical y horizontalmente un elemento absoluto?VUna técnica clásica es: `top: 50%`, `left: 50%` y `transform: translate(-50%, -50%)`. Esto mueve el elemento al centro del padre y luego corrige su propia posición basándose en su tamaño.