Fixed and sticky positioning

Fixed positioning is normally relative to the viewport and stays in place while the page scrolls. Sticky positioning begins in normal flow and attaches to a container edge after reaching a threshold. A sticky element needs an offset such as top: 0.

Read a rule first

A CSS declaration uses property: value;. The semicolon ends one declaration, and braces group declarations for the same selector. The browser reads rules from top to bottom. When several rules match one element, the cascade considers their source, selector specificity, and order.

<div class="scroll-area">
  <h3>Lesson notes</h3>
  <p>Scroll this area to watch the heading.</p>
  <p>
    Line
    <br>
    Line
    <br>
    Line
    <br>
    Line
    <br>
    Line
    <br>
    Line
    <br>
    Line
    <br>
    Line
  </p>
</div>

.scroll-area { height: 220px; overflow: auto; border: 1px solid #94a3b8; }
.scroll-area h3 { position: sticky; top: 0; margin: 0; padding: 12px; background: #0f766e; color: white; }
.scroll-area p { padding: 0 12px; line-height: 2; }

Change one value at a time and watch the text, color, size, or position. This connects each declaration to a visible result. Browser developer tools show the result of the same matching process.

A useful checking order

• Confirm that the selector matches the intended HTML element.
• Check the property name, colon, value, and semicolon.
• Test narrow space, longer text, and keyboard use.

A common source of confusion

CSS changes presentation and layout; it does not change the meaning of the HTML. Keep meaningful HTML elements and style them, rather than choosing the wrong element only for its default appearance. Readability comes before decoration.

<div class="scroll-area">
  <h3>Lesson notes</h3>
  <p>Scroll this area to watch the heading.</p>
  <p>
    Line
    <br>
    Line
    <br>
    Line
    <br>
    Line
    <br>
    Line
    <br>
    Line
    <br>
    Line
    <br>
    Line
  </p>
</div>