CSS Display y Position

<!-- 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>

/* 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 */
}

<!-- 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 -->

.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 */
}

<!-- 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>

.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 */
}

<!-- 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>

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

.oculto-hidden {
  visibility: hidden;  /* El elemento sigue ocupando espacio */
}

<!-- Todos los elementos son static por defecto -->
<div class="caja-estatica">Caja estática</div>

.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 */
}

<!-- Elemento que será movido respecto a su lugar original -->
<div class="caja-relativa">Caja relativa</div>

.caja-relativa {
  position: relative; /* Permite mover sin salir del flujo */
  top: 20px;          /* Desplazamiento visual */
}

<!-- Contenedor principal -->
<div class="tarjeta">
  <!-- Elemento superpuesto -->
  <span class="badge">Nuevo</span>
  <p>Producto</p>
</div>

.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 */
}

.barra-fija {
  position: fixed; /* Se fija al viewport */
  top: 0;          /* Pegada arriba de la pantalla */
}

<!-- Título que se fijará al hacer scroll -->
<h2 class="titulo-sticky">Sección</h2>

.titulo-sticky {
  position: sticky; /* Comportamiento híbrido */
  top: 10px;        /* Umbral de fijación */
}

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

<!-- Capa que se superpone -->
<div class="capa superior"></div>

.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 */
}