Fixed Positioning

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

In CSS, fixed positioning keeps an element in the same spot on the screen, no matter how much you scroll. When you set position: fixed;, the element is removed from the normal layout, so other elements ignore it. It stays fixed to the browser window, making it useful for headers, footers, or menus that should always be visible.

Here's the basic syntax for using fixed positioning:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: fixed;: This declaration sets the element's positioning scheme to fixed.

top, right, bottom, left: These properties specify the position of the element relative to the viewport. You can use positive or negative values, specified in pixels (px), ems (em), percentages (%), or other valid CSS units.

For example:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

In this example, the element with the class header is fixed to the top of the viewport with position: fixed;, top: 0;, and left: 0;.

Challenge

Easy

You are given an HTML document with a header (<div>) and a paragraph (<p>). Your task is to use fixed positioning to make the header stay at the top of the viewport even when the page is scrolled. Follow the steps below:

Write a CSS rule that targets the <div> element with the class header.
Set the position property of the .header element to fixed.
Set the top property of the .header element to 0 and the left property to 0. This will position the header at the top-left corner of the viewport.
Set the width property of the .header element to 100% to make it stretch across the entire viewport.
Set the background-color property of the .header element to #fcc726 (golden yellow) so that it is visible against the page content.
Set the text-align property to center, so it looks better.

Cheat sheet

Fixed positioning keeps an element in the same spot on the screen regardless of scrolling. The element is removed from normal layout flow.

Basic syntax:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

Example - fixing an element to the top-left of viewport:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

Position properties (top, right, bottom, left) specify the element's position relative to the viewport and accept values in pixels, ems, percentages, or other CSS units.

Try it yourself

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>