CSS offset properties tell a positioned element how far to move from an edge of its positioning context. The four familiar controls are top, right, bottom, and left. section 8.7
Use offset properties with the CSS position property:
- static ignores offsets; relative shifts an element from its normal spot while keeping its space in the page flow. section 8.7
- absolute places an element within the nearest nonstatic ancestor, while fixed places it within the browser viewport; both remove it from normal flow. section 8.7
- sticky begins as relative positioning, then sticks when scrolling reaches the specified offset threshold. section 8.11
- Set offsets with px, em, rem, vw, vh, percentages, or auto. section 8.7
A navigation row that sticks
A navigation element can scroll normally until its top edge reaches 5 pixels from the viewport’s top, where it stays temporarily. When its parent boundary catches up, it becomes unstuck and scrolls away. section 8.11
.nav-links {
position: sticky;
top: 5px;
}
This small rule pairs sticky positioning with a top offset, creating the navigation behavior described above. section 8.11
