Title: Actividad 12: Modelo de Caja y Posicionamiento en CSS
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad 1 - Introducción al Desarrollo Web

🎯 Objetivo

Practicar el modelo de caja (márgenes, bordes, padding, tamaño, box-sizing) y posicionamiento (position: static/relative/absolute/fixed/sticky, z-index, display) para construir layouts controlados y elementos superpuestos.

🧩 Instrucciones

1. Identificación
Al inicio del documento escribe tu nombre completo y el nombre del profesor.
2. Archivos base
Crea index.html y styles.css. No modifiques la estructura HTML indicada a continuación; trabaja solo en el CSS.
3. Estructura HTML (copia en index.html)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Actividad 12 - Caja y Posicionamiento</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="site-header">
    <h1>Mi sitio</h1>
    <nav class="site-nav">
      <a href="#">Inicio</a>
      <a href="#">Blog</a>
      <a href="#">Contacto</a>
    </nav>
  </header>

  <main class="layout">
    <section class="contenido">
      <article class="card">
        <h2>Título de la tarjeta</h2>
        <p>Texto de ejemplo para practicar el modelo de caja.</p>
        <span class="badge">Nuevo</span>
      </article>

      <article class="caja-superpuesta">
        <h3>Caja superpuesta</h3>
        <p>Elemento para practicar z-index y posicionamiento.</p>
      </article>
    </section>

    <aside class="sidebar">
      <h3>Sidebar</h3>
      <ul>
        <li>Enlace 1</li>
        <li>Enlace 2</li>
        <li>Enlace 3</li>
      </ul>
    </aside>
  </main>

  <footer class="site-footer">
    <p>© 2025 Mi sitio</p>
  </footer>
</body>
</html>


1. Requisitos (aplícalos en styles.css)

- Modelo de caja global: activa box-sizing para que el padding/border cuenten dentro del ancho/alto.
- Header sticky: deja el .site-header fijo en la parte superior con comportamiento sticky y agrega un relleno superior en el contenido para que no lo tape.
- Navegación: muestra los enlaces de .site-nav en línea con separación usando propiedades del modelo de caja (padding/margin/border) y display.
- Layout principal: crea un layout de dos columnas (contenido + sidebar) sin usar grid; puede ser con display: inline-block, flex o float (elige uno). La sidebar debe medir ~30% y el contenido ~70% del ancho disponible.
- Card (modelo de caja): en .card aplica padding, border, border-radius, margin y un ancho máximo legible. Controla el desbordamiento de texto si es necesario.
- Badge posicionado: posiciona .badge sobre la esquina superior derecha de la .card usando position: absolute dentro de una .card con position: relative.
- Caja superpuesta: coloca .caja-superpuesta de modo que se solape ligeramente con la tarjeta y ajusta el orden visual usando z-index (debe quedar por encima o debajo según definas).
- Footer fijo opcional (solo si te alcanza): crea una variante con position: fixed en .site-footer y explica (en un comentario CSS) el efecto en el flujo del documento.

1. Responsivo (sugerido)

- Con @media (max-width: 768px), haz que el layout pase a una sola columna (sidebar debajo del contenido) y ajusta márgenes/padding para mantener legibilidad.

📁 Evidencia

Un solo PDF que incluya:

- El contenido completo de tu styles.css.
- Capturas del sitio en escritorio y móvil donde se aprecie:
  - Header sticky funcionando.
  - Dos columnas en escritorio y una en móvil.
  - La tarjeta con badge posicionado.
  - La caja superpuesta con z-index.

📤 Método de entrega

Sube tu PDF a la plataforma.

🎯 Objetivo

Practicar el modelo de caja (márgenes, bordes, padding, tamaño, box-sizing) y posicionamiento (position: static/relative/absolute/fixed/sticky, z-index, display) para construir layouts controlados y elementos superpuestos.

🧩 Instrucciones

1. Identificación
Al inicio del documento escribe tu nombre completo y el nombre del profesor.
2. Archivos base
Crea index.html y styles.css. No modifiques la estructura HTML indicada a continuación; trabaja solo en el CSS.
3. Estructura HTML (copia en index.html)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Actividad 12 - Caja y Posicionamiento</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header class="site-header">
    <h1>Mi sitio</h1>
    <nav class="site-nav">
      <a href="#">Inicio</a>
      <a href="#">Blog</a>
      <a href="#">Contacto</a>
    </nav>
  </header>

  <main class="layout">
    <section class="contenido">
      <article class="card">
        <h2>Título de la tarjeta</h2>
        <p>Texto de ejemplo para practicar el modelo de caja.</p>
        <span class="badge">Nuevo</span>
      </article>

      <article class="caja-superpuesta">
        <h3>Caja superpuesta</h3>
        <p>Elemento para practicar z-index y posicionamiento.</p>
      </article>
    </section>

    <aside class="sidebar">
      <h3>Sidebar</h3>
      <ul>
        <li>Enlace 1</li>
        <li>Enlace 2</li>
        <li>Enlace 3</li>
      </ul>
    </aside>
  </main>

  <footer class="site-footer">
    <p>© 2025 Mi sitio</p>
  </footer>
</body>
</html>


1. Requisitos (aplícalos en styles.css)

- Modelo de caja global: activa box-sizing para que el padding/border cuenten dentro del ancho/alto.
- Header sticky: deja el .site-header fijo en la parte superior con comportamiento sticky y agrega un relleno superior en el contenido para que no lo tape.
- Navegación: muestra los enlaces de .site-nav en línea con separación usando propiedades del modelo de caja (padding/margin/border) y display.
- Layout principal: crea un layout de dos columnas (contenido + sidebar) sin usar grid; puede ser con display: inline-block, flex o float (elige uno). La sidebar debe medir ~30% y el contenido ~70% del ancho disponible.
- Card (modelo de caja): en .card aplica padding, border, border-radius, margin y un ancho máximo legible. Controla el desbordamiento de texto si es necesario.
- Badge posicionado: posiciona .badge sobre la esquina superior derecha de la .card usando position: absolute dentro de una .card con position: relative.
- Caja superpuesta: coloca .caja-superpuesta de modo que se solape ligeramente con la tarjeta y ajusta el orden visual usando z-index (debe quedar por encima o debajo según definas).
- Footer fijo opcional (solo si te alcanza): crea una variante con position: fixed en .site-footer y explica (en un comentario CSS) el efecto en el flujo del documento.

1. Responsivo (sugerido)

- Con @media (max-width: 768px), haz que el layout pase a una sola columna (sidebar debajo del contenido) y ajusta márgenes/padding para mantener legibilidad.

📁 Evidencia

Un solo PDF que incluya:

- El contenido completo de tu styles.css.
- Capturas del sitio en escritorio y móvil donde se aprecie:
  - Header sticky funcionando.
  - Dos columnas en escritorio y una en móvil.
  - La tarjeta con badge posicionado.
  - La caja superpuesta con z-index.

📤 Método de entrega

Sube tu PDF a la plataforma.