📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials CSS Mastery Positioning

Positioning

5 min read
position: static is the default. relative offsets from normal position. absolute positions relative to the nearest positioned ancestor. fixed stays in viewport while scrolling. sticky scrolls then sticks at a threshold.

CSS Positioning

position: static;    /* default — normal flow */
position: relative;  /* offset from normal position */
position: absolute;  /* removed from flow, relative to parent */
position: fixed;     /* relative to viewport */
position: sticky;    /* hybrid of relative and fixed */

/* Example: sticky navbar */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
}