CSS: Cómo usar display y position

🧠 CSS: Cómo usar display y position.

Cuando alguien empieza con CSS, hay dos temas que casi siempre se sienten confusos:

  • display
  • position

Y es normal.
Porque ambos afectan cómo se acomodan los elementos en la página, pero no hacen lo mismo.

Muchos principiantes los mezclan.
Ven flex, block, absolute, relative, fixed… y parece que todo sirve para “mover cosas”.

Pero no.

La clave es entender esto desde el principio:

  • display define cómo se comporta un elemento dentro del flujo del documento.
  • position define cómo se posiciona un elemento respecto a su lugar normal o respecto a otro contenedor.

Si entiendes esta diferencia, empiezas a dominar el diseño web de verdad.

📌 Primero: ¿qué es el flujo normal del documento?

Antes de hablar de display y position, hay que entender una idea muy importante:

Cuando escribes HTML, los elementos ya tienen una forma “normal” de acomodarse.

Ejemplo:

<h1>Título</h1>
<p>Primer párrafo</p>
<p>Segundo párrafo</p>

El navegador los acomoda uno debajo del otro.

Eso es el flujo normal.

Algunos elementos ocupan todo el ancho disponible y bajan a la siguiente línea.
Otros se quedan en la misma línea.

CSS puede cambiar ese comportamiento.

Y aquí entran display y position.

🎯 Qué hace display

La propiedad display le dice al navegador:

👉 “¿Cómo debe comportarse este elemento?”

Por ejemplo:

  • si debe ocupar toda una línea
  • si debe ir en la misma línea que otros
  • si debe funcionar como contenedor flexible
  • si debe organizar elementos en cuadrícula
  • si debe desaparecer visualmente

Sintaxis básica:

.elemento {
  display: block;
}

🧱 display: block

Un elemento block:

  • ocupa todo el ancho disponible
  • empieza en una línea nueva
  • empuja al siguiente elemento hacia abajo
  • acepta width, height, margin, padding

Ejemplo:

<div class="caja">Caja 1</div>
<div class="caja">Caja 2</div>
.caja {
  display: block;
  background: lightblue;
  margin: 10px 0;
}

Resultado:
las cajas se verán una debajo de la otra.

Elementos que normalmente ya son block

  • div
  • p
  • h1 a h6
  • section
  • article
  • header
  • footer
  • main

Cuándo usar block

Cuando quieres que el elemento:

  • se comporte como una sección
  • ocupe línea completa
  • tenga estructura vertical
  • funcione como caja grande de contenido

Ejemplo real:
un banner, una tarjeta, un contenedor principal, un párrafo, una sección de servicios.

🧵 display: inline

Un elemento inline:

  • no ocupa todo el ancho
  • se queda en la misma línea
  • solo ocupa el espacio de su contenido
  • no respeta bien width ni height
  • se usa más para texto o elementos pequeños dentro del texto

Ejemplo:

<p>
  Aprende <span class="resaltado">HTML</span> y
  <span class="resaltado">CSS</span>.
</p>
.resaltado {
  display: inline;
  background: yellow;
}

Resultado:
los span se quedan dentro de la misma línea del texto.

Elementos que normalmente ya son inline

  • span
  • a
  • strong
  • em
  • b
  • i

Cuándo usar inline

Cuando el elemento forma parte del texto y no quieres que rompa la línea.

Ejemplo real:
palabras resaltadas, enlaces dentro de un párrafo, iconos pequeños dentro de un texto.

🔲 display: inline-block

Aquí está uno de los valores más útiles para entender la transición entre inline y block.

inline-block:

  • se queda en la misma línea como inline
  • pero sí permite width, height, padding, margin

Ejemplo:

<a href="#" class="boton">Botón 1</a>
<a href="#" class="boton">Botón 2</a>
.boton {
  display: inline-block;
  background: green;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  margin-right: 10px;
}

Resultado:
los botones estarán uno al lado del otro, pero con apariencia de caja.

Cuándo usar inline-block

Cuando quieres elementos alineados horizontalmente, pero que se vean como cajas.

Ejemplo real:
botones, etiquetas, badges, pequeñas tarjetas.

🚫 display: none

Este valor oculta completamente el elemento.

.oculto {
  display: none;
}

Eso significa:

  • no se muestra
  • no ocupa espacio
  • es como si no estuviera en la página visualmente

Ejemplo:

<p class="oculto">No me ves</p>

Diferencia con visibility: hidden

  • display: none → desaparece y no ocupa espacio
  • visibility: hidden → desaparece, pero sí sigue ocupando espacio

Cuándo usar display: none

  • menús ocultos
  • ventanas emergentes antes de abrirse
  • contenido que aparece con JavaScript
  • ocultar elementos en móvil o escritorio con media queries

Ejemplo responsive:

@media (max-width: 768px) {
  .menu-escritorio {
    display: none;
  }
}

🔥 display: flex

Ahora entramos a una de las partes más importantes de CSS moderno.

Flexbox sirve para alinear y distribuir elementos de forma mucho más fácil.

Cuando pones:

.contenedor {
  display: flex;
}

ese elemento se convierte en un contenedor flex y sus hijos pasan a ser elementos flexibles.

Qué cambia automáticamente con flex

Por defecto:

  • los hijos se ponen en fila horizontal
  • ya no se apilan uno debajo del otro
  • puedes controlar alineación, distribución, orden y tamaño

Ejemplo básico:

<div class="contenedor">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
.contenedor {
  display: flex;
}.item {
  background: lightcoral;
  padding: 20px;
  margin: 5px;
}

Resultado:
los tres elementos se acomodan en una fila.

🧭 Profundizando en Flexbox

1. flex-direction

Define la dirección del eje principal.

.contenedor {
  display: flex;
  flex-direction: row;
}

Valores principales:

  • row → horizontal
  • row-reverse → horizontal al revés
  • column → vertical
  • column-reverse → vertical al revés

Ejemplo:

.contenedor {
  display: flex;
  flex-direction: column;
}

Resultado:
los elementos se verán uno debajo del otro, pero controlados por flex.

Cuándo usar column

  • formularios
  • menús verticales
  • tarjetas apiladas
  • contenido de sidebar

2. justify-content

Alinea los elementos sobre el eje principal.

Si flex-direction: row, el eje principal es horizontal.
Si flex-direction: column, el eje principal es vertical.

.contenedor {
  display: flex;
  justify-content: center;
}

Valores más comunes:

  • flex-start → al inicio
  • center → al centro
  • flex-end → al final
  • space-between → separados con espacio entre ellos
  • space-around → espacio alrededor
  • space-evenly → espacio uniforme

Ejemplo:

.contenedor {
  display: flex;
  justify-content: space-between;
}

Ideal para:

  • menús
  • encabezados
  • barras con elementos separados

3. align-items

Alinea los elementos sobre el eje cruzado.

Si el eje principal es horizontal, align-items trabaja verticalmente.

.contenedor {
  display: flex;
  align-items: center;
}

Valores comunes:

  • stretch
  • flex-start
  • center
  • flex-end

Ejemplo real:

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Esto es muy usado para:

  • logo a la izquierda y menú a la derecha
  • centrar verticalmente botones e iconos
  • barras de navegación

4. gap

Define espacio entre elementos flex.

.contenedor {
  display: flex;
  gap: 20px;
}

Mucho mejor que andar poniendo margin-right a cada hijo.

5. flex-wrap

Por defecto, flex intenta meter todo en una sola fila.

Con flex-wrap: wrap;, los elementos pueden bajar a otra línea.

.contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

Esto es muy útil para:

  • galerías
  • tarjetas
  • bloques de servicios
  • layouts responsive

6. flex-grow, flex-shrink y flex-basis

Aquí ya entramos a un nivel más profundo.

flex-grow

Define cuánto puede crecer un elemento en relación a los demás.

.item1 {
  flex-grow: 1;
}.item2 {
  flex-grow: 2;
}

El segundo crecerá el doble que el primero.

flex-shrink

Define cuánto puede encogerse.

flex-basis

Define el tamaño base inicial.

Ejemplo combinado:

.item {
  flex: 1;
}

Eso suele equivaler a una combinación práctica para que todos crezcan de forma uniforme.

Muy útil en:

  • columnas iguales
  • secciones de servicios
  • tarjetas con mismo ancho dinámico

🧱 display: grid

Grid sirve para trabajar con cuadrículas, filas y columnas de forma más exacta que flex.

Si flex es excelente para una dimensión, grid es excelente para dos dimensiones.

.contenedor {
  display: grid;
}

Ejemplo básico:

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

Resultado:
dos columnas.

Cuándo usar grid

  • galerías
  • layouts completos
  • secciones con varias filas y columnas
  • paneles
  • dashboards

Cuándo usar flex o grid

  • usa flex para alinear elementos en una sola dirección
  • usa grid para estructuras de varias filas y columnas

Ejemplo práctico:

  • menú horizontal → flex
  • galería de productos → grid

🧠 Resumen rápido de display

  • block → ocupa toda la línea
  • inline → sigue en línea
  • inline-block → en línea, pero con medidas
  • none → desaparece
  • flex → alinear y distribuir fácilmente
  • grid → organizar en cuadrícula

📍 Qué hace position

Ahora viene la otra gran parte.

La propiedad position define cómo se coloca un elemento.

Valores principales:

  • static
  • relative
  • absolute
  • fixed
  • sticky

1. position: static

Es el valor por defecto.

.elemento {
  position: static;
}

El elemento sigue el flujo normal y las propiedades top, right, bottom, left no tienen efecto.

Ejemplo:

<div class="caja">Caja normal</div>
.caja {
  position: static;
}

Cuándo usarlo

En realidad, casi nunca lo escribes manualmente porque ya viene por defecto.

2. position: relative

Aquí pasa algo muy importante:

El elemento mantiene su espacio en el flujo normal, pero ahora puedes moverlo visualmente usando:

  • top
  • right
  • bottom
  • left

Ejemplo:

<div class="caja-relativa">Caja</div>
.caja-relativa {
  position: relative;
  top: 20px;
  left: 30px;
}

Resultado:

  • la caja se mueve
  • pero el espacio original que ocupaba sigue reservado

Lo más importante de relative

Además de mover el elemento, sirve para crear un punto de referencia para hijos con position: absolute.

Y esta es una de las cosas más importantes de todo CSS.

Ejemplo:

<div class="tarjeta">
  <span class="etiqueta">Nuevo</span>
  <img src="foto.jpg" alt="Producto">
</div>
.tarjeta {
  position: relative;
  width: 300px;
}.etiqueta {
  position: absolute;
  top: 10px;
  right: 10px;
}

Si .tarjeta no tuviera position: relative, la etiqueta absoluta podría colocarse respecto a otro ancestro o incluso respecto a la ventana.

Cuándo usar relative

  • cuando necesitas pequeños ajustes visuales
  • cuando quieres que un hijo absolute se posicione dentro del contenedor
  • cuando haces badges, iconos flotantes, etiquetas encima de imágenes

3. position: absolute

Este es uno de los que más confunden.

Un elemento con absolute:

  • sale del flujo normal
  • deja de reservar su espacio
  • puede colocarse con top, right, bottom, left
  • se posiciona respecto al ancestro posicionado más cercano

Ejemplo:

<div class="contenedor">
  <div class="hijo">Soy absoluto</div>
</div>
.contenedor {
  position: relative;
  width: 400px;
  height: 200px;
  background: lightgray;
}.hijo {
  position: absolute;
  top: 20px;
  right: 20px;
  background: tomato;
}

Resultado:
el hijo se coloca dentro del contenedor, en la esquina superior derecha.

Qué significa “sale del flujo normal”

Que los demás elementos actúan como si no estuviera ocupando espacio.

Esto es clave.

Ejemplo:

<div class="padre">
  <div class="absoluto">A</div>
  <p>Texto debajo</p>
</div>

Si el primer elemento es absoluto, el párrafo no lo “respeta” como bloque ocupando espacio.

Cuándo usar absolute

  • etiquetas sobre imágenes
  • iconos en inputs
  • botones sobre banners
  • overlays
  • elementos decorativos
  • capas encima de otras

Cuándo NO usarlo

No conviene usar absolute para construir toda la estructura de una página.
Porque puede romper la adaptabilidad y hacer el diseño difícil de mantener.

Muchos principiantes intentan acomodar todo con absolute.
Eso casi siempre termina en caos.

Usa absolute para detalles o elementos puntuales, no para maquetar todo el sitio.

4. position: fixed

Un elemento con fixed:

  • sale del flujo normal
  • queda fijo respecto a la ventana del navegador
  • no se mueve aunque hagas scroll

Ejemplo:

<a href="#" class="whatsapp">WhatsApp</a>
.whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: green;
  color: white;
  padding: 15px;
  border-radius: 50%;
}

Resultado:
el botón se queda siempre visible abajo a la derecha.

Cuándo usar fixed

  • botones flotantes
  • menús fijos
  • barras superiores
  • botones de “volver arriba”
  • soporte por WhatsApp

Cuidado con fixed

Si abusas de él:

  • tapa contenido
  • molesta en móvil
  • puede dar sensación pesada

5. position: sticky

sticky es como una mezcla entre relative y fixed.

Al principio se comporta normal, pero cuando llegas a cierto punto con el scroll, se queda pegado.

Ejemplo:

.menu {
  position: sticky;
  top: 0;
  background: black;
  color: white;
}

Resultado:
el menú se desplaza normalmente, pero al llegar arriba queda pegado.

Cuándo usar sticky

  • encabezados
  • menús de navegación
  • títulos de secciones
  • sidebars que deben seguir visibles parcialmente

Diferencia con fixed

  • fixed está fijo siempre
  • sticky solo se pega cuando alcanzas una posición

🧭 top, right, bottom, left

Estas propiedades sirven para desplazar elementos posicionados.

.caja {
  position: absolute;
  top: 20px;
  right: 30px;
}

Significados:

  • top → distancia desde arriba
  • right → distancia desde la derecha
  • bottom → distancia desde abajo
  • left → distancia desde la izquierda

No funcionan como esperas con position: static.

🧱 z-index

Cuando varios elementos se superponen, z-index define cuál queda encima.

.capa1 {
  position: absolute;
  z-index: 1;
}.capa2 {
  position: absolute;
  z-index: 2;
}

La capa 2 quedará encima.

Cuándo usar z-index

  • menús desplegables
  • modales
  • overlays
  • badges sobre imágenes
  • cabeceras fijas

🔥 Comparación real: relative vs absolute

Este punto es importantísimo.

relative

  • sigue ocupando su espacio
  • se mueve desde su posición original
  • sirve de referencia para hijos absolutos

absolute

  • sale del flujo
  • no ocupa espacio reservado
  • se posiciona respecto a un ancestro posicionado

Ejemplo visual mental

Imagina una tarjeta con una etiqueta “Oferta”.

La tarjeta debe existir como caja normal.
La etiqueta debe ir flotando arriba.

Entonces:

  • la tarjeta → position: relative
  • la etiqueta → position: absolute

Ese patrón se usa muchísimo.

🔥 Comparación real: absolute vs fixed

absolute

Se mueve respecto a un contenedor.

fixed

Se mueve respecto a la ventana del navegador y permanece visible al hacer scroll.

Ejemplo

  • icono dentro de una tarjeta → absolute
  • botón flotante de WhatsApp → fixed

🔥 Comparación real: flex vs position

Aquí también muchos se confunden.

flex

Sirve para organizar hijos dentro de un contenedor.

position

Sirve para ubicar un elemento de manera específica.

No compiten entre sí.
Se complementan.

Ejemplo:

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
}

Aquí:

  • flex organiza los elementos del header
  • sticky hace que el header se quede arriba

🧪 Ejemplo práctico completo 1: menú con flex

<header class="header">
  <div class="logo">OpersLinux</div>
  <nav class="menu">
    <a href="#">Inicio</a>
    <a href="#">Servicios</a>
    <a href="#">Contacto</a>
  </nav>
</header>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111;
  padding: 20px;
}.menu {
  display: flex;
  gap: 20px;
}.menu a {
  color: white;
  text-decoration: none;
}

Qué está pasando

  • .header alinea logo y menú
  • .menu alinea los enlaces horizontalmente
  • gap separa enlaces

🧪 Ejemplo práctico completo 2: etiqueta sobre imagen con relative y absolute

<div class="producto">
  <span class="oferta">Oferta</span>
  <img src="producto.jpg" alt="Producto">
</div>
.producto {
  position: relative;
  width: 300px;
}.producto img {
  width: 100%;
  display: block;
}.oferta {
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  color: white;
  padding: 5px 10px;
}

Qué está pasando

  • .producto es la referencia
  • .oferta se coloca arriba de la imagen
  • sin relative en .producto, la etiqueta podría salir mal ubicada

🧪 Ejemplo práctico completo 3: botón fijo de WhatsApp

<a href="#" class="btn-whatsapp">W</a>
.btn-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: green;
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

Qué está pasando

  • fixed lo deja fijo
  • display: flex centra la letra dentro del círculo
  • aquí ves cómo display y position trabajan juntos

🧪 Ejemplo práctico completo 4: tarjetas responsive con flex-wrap

<div class="servicios">
  <div class="card">Diseño Web</div>
  <div class="card">SEO</div>
  <div class="card">WordPress</div>
  <div class="card">Soporte</div>
</div>
.servicios {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}.card {
  flex: 1 1 200px;
  background: #eee;
  padding: 20px;
}

Qué está pasando

  • display: flex pone tarjetas en fila
  • flex-wrap: wrap permite que bajen si no caben
  • flex: 1 1 200px les da un tamaño flexible

Esto ya es diseño moderno real.

⚠️ Errores comunes que cometen casi todos

1. Querer mover todo con position: absolute

Eso rompe layouts muy fácilmente.

2. No poner position: relative al padre

Entonces el hijo absoluto se posiciona respecto a otro lugar.

3. Confundir justify-content con align-items

Recuerda:

  • justify-content → eje principal
  • align-items → eje cruzado

4. Usar inline y esperar que acepte width

No funciona como una caja normal.

5. No entender que display: none elimina el espacio

Y esperar que deje hueco visual.

6. Querer usar flex para todo y olvidar grid

Flex no siempre es la mejor opción si hay muchas filas y columnas.

🧠 Cómo decidir cuál usar

Hazte estas preguntas:

Si quieres organizar elementos uno junto a otro:

usa display: flex

Si quieres una cuadrícula:

usa display: grid

Si quieres que un elemento ocupe toda una línea:

usa display: block

Si quieres que esté dentro del texto:

usa display: inline

Si quieres una caja pequeña alineada en línea:

usa inline-block

Si quieres ocultarlo:

usa display: none

Si quieres moverlo un poco sin sacarlo del flujo:

usa position: relative

Si quieres ponerlo encima de otro elemento:

usa position: absolute

Si quieres dejarlo fijo en pantalla:

usa position: fixed

Si quieres que se pegue al hacer scroll:

usa position: sticky

🧩 Regla mental fácil para no confundirte

Piensa así:

display = cómo vive el elemento
position = dónde se coloca

O todavía más simple:

  • display organiza
  • position ubica

🧠 Conclusión

Entender display y position bien cambia por completo tu forma de hacer páginas web.

Porque a partir de aquí ya no trabajas “moviendo cosas al azar”.
Empiezas a construir con intención.

Cuando dominas esto, ya puedes hacer:

  • menús reales
  • headers modernos
  • tarjetas
  • galerías
  • botones flotantes
  • overlays
  • banners
  • diseños responsive

Y sobre todo, puedes dejar de copiar código sin entenderlo.

La clave está en practicar cada valor por separado y luego combinarlos en ejemplos reales.

No necesitas memorizar todo de golpe.
Necesitas usarlo varias veces hasta que empiece a tener sentido visual.

Entradas relacionadas

Deja un comentario