Recap Challenge

Part of the Styling with CSS section of Coddy's HTML journey — lesson 60 of 76.

Challenge

Easy

Now that you've learned various positioning techniques in CSS, including relative, absolute, fixed, and z-index, it's time to put your knowledge to the test with a comprehensive challenge. This challenge will help you solidify your understanding of how to use these properties together to create complex and dynamic layouts. You'll apply what you've learned about each positioning scheme to recreate a specific design.

You are given an HTML document for a pizza restaurant website. Your task is to use the CSS positioning properties to style the following elements to create a clean and organized layout.

Follow the steps below:

Header Styling:
- Target the <header> element.
- Set the position to fixed so it stays at the top of the page.
- Set the top to 0, left to 0, and width to 100% to ensure it spans the full width of the page.
- Use z-index of 10 to ensure the header is above other elements on the page.
Menu Section Styling:
- Target the .menu class.
- Set the position to relative to allow it to be positioned in relation to its normal position in the flow.
Promotions Box Styling:
- Target the .promotions class.
- Set the position to absolute to place it relative to the .menu section.
- Set top to 100px and right to 20px to position it towards the top-right of the menu.
- Use z-index of 5 to make sure it stays below the header but above other content in the menu.

Cheat sheet

CSS positioning properties allow you to control element placement:

Fixed positioning: Element stays in place when scrolling

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

Relative positioning: Element positioned relative to its normal position

.menu {
  position: relative;
}

Absolute positioning: Element positioned relative to its nearest positioned parent

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

Z-index: Controls stacking order of positioned elements (higher values appear on top)

Try it yourself

<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>
    <!-- Fixed Header -->
    <header>
        Pizza Restaurant
    </header>
    <!-- Menu Section -->
    <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>
    <!-- Promotions Box -->
    <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>