Desafío de repaso

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 60 de 76.

Desafío

Fácil

Ahora que has aprendido varias técnicas de posicionamiento en CSS, incluyendo relative, absolute, fixed y z-index, es hora de poner a prueba tus conocimientos con un desafío integral. Este desafío te ayudará a consolidar tu comprensión sobre cómo usar estas propiedades juntas para crear diseños complejos y dinámicos. Aplicarás lo que has aprendido sobre cada esquema de posicionamiento para recrear un diseño específico.

Se te proporciona un documento HTML para el sitio web de una pizzería. Tu tarea es utilizar las propiedades de posicionamiento de CSS para dar estilo a los siguientes elementos y crear un diseño limpio y organizado.

Sigue los pasos a continuación:

Estilo del Encabezado (Header):
- Apunta al elemento <header>.
- Establece la propiedad position en fixed para que permanezca en la parte superior de la página.
- Establece top en 0, left en 0 y width en 100% para asegurar que abarque todo el ancho de la página.
- Usa un z-index de 10 para asegurar que el encabezado esté por encima de otros elementos en la página.
Estilo de la Sección del Menú:
- Apunta a la clase .menu.
- Establece la propiedad position en relative para permitir que se posicione en relación con su posición normal en el flujo.
Estilo del Cuadro de Promociones:
- Apunta a la clase .promotions.
- Establece la propiedad position en absolute para colocarlo en relación con la sección .menu.
- Establece top en 100px y right en 20px para posicionarlo hacia la parte superior derecha del menú.
- Usa un z-index de 5 para asegurarte de que permanezca debajo del encabezado pero por encima de otro contenido en el menú.

Hoja de referencia

Las propiedades de posicionamiento de CSS le permiten controlar la ubicación de los elementos:

Posicionamiento fijo (Fixed): El elemento permanece en su lugar al desplazarse por la página

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

Posicionamiento relativo (Relative): El elemento se posiciona en relación con su posición normal

.menu {
  position: relative;
}

Posicionamiento absoluto (Absolute): El elemento se posiciona en relación con su ancestro posicionado más cercano

.promotions {
  position: absolute;
  top: 100px;
  right: 20px;
  z-index: 5;
}

Z-index: Controla el orden de apilamiento de los elementos posicionados (los valores más altos aparecen en la parte superior)

Pruébalo tú mismo

<html>
<head>
    <title>Pizza Restaurant</title>
    <style>
        /* Fixed Header */
        header {
            background-color: #ff6f61;
            padding: 20px;
            text-align: center;
            font-size: 24px;
            color: white;
        }
        /* Menu Section (Relative) */
        .menu {
            margin-top: 70px; /* Space for fixed header */
            padding: 20px;
            background-color: #f8f8f8;
            font-size: 18px;
        }
        /* Promotions Box (Absolute) */
        .promotions {
            background-color: #ffdf00;
            padding: 10px;
            font-size: 20px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <!-- Encabezado fijo -->
    <header>
        Pizza Restaurant
    </header>
    <!-- Sección de menú -->
    <div class="menu">
        <h2>Our Menu</h2>
        <ul>
            <li>Margherita</li>
            <li>Pepperoni</li>
            <li>Veggie</li>
            <li>Hawaiian</li>
        </ul>       
        <p>Order now and enjoy!</p>
    </div>
    <!-- Cuadro de promociones -->
    <div class="promotions">
        <p>Get 20% off your first order!</p>
    </div>
    <div class="pizza-info">
        <h2>About Pizza</h2>
        <p>Pizza, a dish with origins in Italy, is one of the world's most beloved foods. It was first made in Naples during the 18th century, with the classic Margherita pizza being named after Queen Margherita of Savoy. The traditional pizza is known for its simple ingredients: a thin crust, tomato sauce, mozzarella cheese, and fresh basil.</p>
        <p>Over the years, pizza has evolved into a variety of regional styles, from thin-crust New York-style pizza to deep-dish Chicago pizza. While the toppings have diversified, the tradition of sharing a pizza with family and friends remains an essential part of the pizza experience.</p>
        <p>In Italy, pizza is often enjoyed casually, typically paired with a glass of wine or soda. It is a symbol of Italian culture, and many believe that a good pizza is a representation of the country's culinary expertise and passion for food.</p>
        <p>Pizza's global reach has led to many variations and adaptations in different countries. In Japan, for example, toppings like teriyaki chicken and squid are popular, while in Brazil, green peas and corn are commonly found on pizzas. In the United States, pizza has become a staple of fast food, with different regions offering their unique twists, such as the deep-dish pizza from Chicago and the thin crust of New York City.</p>
    </div>
</body>
</html>