CSSCSS24 min read

CSS Fixed Position

Understand fixed positioning for elements that stay on screen while scrolling.

David Miller
December 21, 2025
4.5k174
    Fixed position stays **relative to viewport**.
    
    ## Example
    ```css
    .navbar {
      position: fixed;
      top: 0;
      width: 100%;
    }
    ```
    
    ## UI imagination
    Navbar always visible at top.
    
    ## Real-world example
    - Sticky headers
    - Chat buttons
    - Cookie banners
    
    ## Warning
    Always add padding-top to body if header is fixed.
    
#CSS#Beginner