[ CSS position property](#)
* * *
`position: sticky` is a relatively new value in CSS positioning properties. **Sticky positioning** is a hybrid of **relative positioning** and **fixed positioning**: the element behaves like relative positioning before crossing a specified **threshold**, and like fixed positioning after crossing it.
This is the modern solution for implementing effects like "sticky navigation bars" and "fixed table headers".
**Word meaning**: `sticky` means "adhesive", indicating that the element will "stick" to a certain position.
* * *
## Basic Syntax
`position: sticky` needs to be combined with at least one directional threshold (`top`, `right`, `bottom`, `left`) to specify where the "stickiness" takes effect.
/* syntax */ position: sticky;/* common combination: fixed when scrolling to 10px from top */.sticky-header { position: sticky; top: 10px;}
## How It Works
The working mechanism of `sticky` positioning can be broken down into two stages:
### Stage 1: Normal Scrolling (Relative Positioning)
When the element **has not reached** the specified threshold in the viewport, the element follows the normal document flow layout and **moves with page scrolling**. At this point it is equivalent to `position: relative`.
### Stage 2: Fixed Display (Fixed Positioning)
When the element scrolls **past** the specified threshold, the element **fixes** at that position and no longer moves with page scrolling. At this point it is equivalent to `position: fixed`.
### Threshold Conditions
| Property | Trigger Condition |
| --- | --- |
| `top: 10px` | Fixed when element top is > 10px from viewport top |
| `bottom: 10px` | Fixed when element bottom is > 10px from viewport bottom |
| `left: 10px` | Fixed when element left is > 10px from viewport left |
| `right: 10px` | Fixed when element right is > 10px from viewport right |
* * *
## Core Features
### Feature 1: Dual Behavior
Sticky combines the characteristics of relative and fixed positioning, making it the perfect combination of both.
### Feature 2: No Parent Positioning Required
Unlike `absolute`, sticky elements **do not require** parent elements to have any positioning properties set.
### Feature 3: Parent Container overflow Limitation
If the parent element has `overflow: hidden`, `overflow: auto`, or `overflow: scroll` set, sticky positioning may fail.
### Feature 4: Activates z-index
Sticky positioning activates the `z-index` property.
* * *
## Examples
Let's dive deeper into the characteristics of `position: sticky` through examples.
### Example 1: Sticky Navigation Bar
This is the most common application of sticky positioning: implementing a sticky navigation bar.
## Example
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
}
/* hero section at top of page */
.hero {
height: 300px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 36px;
font-weight: bold;
}
/* sticky navigation bar */
.sticky-nav {
position: sticky;
top: 0; /* fixed when scrolling to top */
background-color: #2c3e50;
color: white;
padding: 15px 30px;
z-index: 100;
}
.sticky-nav ul {
list-style: none;
display: flex;
gap: 30px;
max-width: 800px;
margin: 0 auto;
}
.sticky-nav a {
color: white;
text-decoration: none;
}
/* content area */
.content {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.section {
margin-bottom: 40px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 4px;
}
.tall-spacer {
height: 1500px;
}
TUTORIAL TUTORIAL
Chapter 1: Getting Started
This is the content of chapter 1. Scroll down to see the sticky effect of the navigation bar.
Chapter 2: Advanced
This is the content of chapter 2.
Chapter 3: Expert
This is the content of chapter 3.
Chapter 4: Practice
This is the content of chapter 4.
Chapter 5: Projects
This is the content of chapter 5.
### Example 2: Fixed Table Header Row
Sticky positioning is perfect for fixing table headers:
## Example
.table-container {
max-width: 600px;
max-height: 300px;
overflow-y: auto; /* need to set overflow to see fixed effect */
border: 2px solid #ddd;
}
table {
width: 100%;
border-collapse: collapse;
}
/* table header uses sticky positioning */
th {
position: sticky;
top: 0;
background-color: #3498db;
color: white;
padding: 12px;
text-align: left;
}
td {
padding: 10px 12px;
border-bottom: 1px solid #eee;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
Student Grades Table
Scroll down to see the fixed header effect:
ID
Name
Chinese
Math
English
001
Zhang San
85
92
88
002
Li Si
90
87
95
003
Wang Wu
78
85
82
004
Zhao Liu
92
88
90
005
Qian Qi
88
91
87
006
Sun Ba
85
89
93
007
Zhou Jiu
80
86
84
008
Wu Shi
91
93
89
009
Zheng Shiyi
87
85
88
010
Chen Shier
89
90
91
### Example 3: Sidebar Sticky Effect
When page content is very long, you can make the sidebar fix after scrolling to a certain position:
## Example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.container {
display: grid;
grid-template-columns: 1fr 200px;
max-width: 900px;
margin: 0 auto;
}
.main-content {
padding: 20px;
}
/* sticky sidebar */
.sidebar {
position: sticky;
top: 20px; /* fixed when 20px from top */
height: fit-content;
background-color: #3498db;
color: white;
padding: 15px;
border-radius: 4px;
}
.content-block {
background-color: #f5f5f5;
padding: 20px;
margin-bottom: 20px;
border-radius: 4px;
}
.tall-block {
height: 800px;
}
Main Content Area
Scroll down to see the sticky effect of the sidebar.
Content Area 1
This is the first content section.
Content Area 2
This is the second content section.
Content Area 3
This is the third content section.
Long Content Area
This is a longer content area to demonstrate the sticky effect of the sidebar.
Continue scrolling down...
Content Area 4
This is the fourth content section.
Content Area 5
This is the fifth content section.
### Example 4: Section Title Fixed
Sticky positioning is perfect for fixing section titles in articles:
## Example
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
/* section title fixed */
.chapter-title {
position: sticky;
top: 0;
background-color: #2c3e50;
color: white;
padding: 15px;
margin: 20px 0 10px;
border-radius: 4px;
}
.content {
padding: 0 15px;
line-height: 1.8;
margin-bottom: 30px;
}
.tall-content {
height: 600px;
}
Book Chapter Example
Chapter 1: Introduction to Programming
Programming is a creative art. This chapter will introduce you to what programming is and why learning programming is so important.
Chapter 2: Environment Setup
Before starting to write code, we need to set up the development environment. This chapter introduces how to install necessary tools and configure the development environment.
The content area is long enough to create a scrolling effect.
Chapter 3: Basic Syntax
This chapter introduces the basic syntax of programming languages, including core concepts such as variables, data types, and operators.
Chapter 4: Control Structures
Control structures determine the execution order of programs. Introduces the use of conditional statements and loop statements.
Chapter 5: Functions
Functions are the basic unit of organizing code. This chapter explains how to define and call functions.
### Example 5: Bidirectional Sticky Positioning
You can set sticky positioning in both horizontal and vertical directions simultaneously:
## Example
body {
font-family: Arial, sans-serif;
}
.calendar {
width: 350px;
border: 2px solid #ddd;
}
/* weekday header row - fixed at top */
.weekday {
position: sticky;
top: 0;
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}
/* time column - fixed at left */
.time-label {
position: sticky;
left: 0;
background-color: #ecf0f1;
padding: 20px 10px;
border-right: 1px solid #ddd;
font-weight: bold;
}
/* day cell */
.day-cell {
padding: 20px;
border: 1px solid #eee;
text-align: center;
}
.day-cell:nth-child(2) {
position: sticky;
left: 50px; /* time column width + border */
background-color: white;
}
/* simulate calendar grid */
.calen
YouTip