Web designers use Cascading Style Sheets (CSS) to control how web pages look and behave. One useful tool in the CSS toolbox: the position: sticky property. Sticky positioning lets certain elements “stick” in place while the rest of the page scrolls normally underneath.
You can use position: sticky to keep elements like navigation bars, promotional banners, and Add to Cart buttons visible as shoppers scroll through your website.
Here’s what CSS position: sticky is, how it works, and how to use it to make your site more user-friendly.
What is position: sticky?
Position: sticky is a CSS positioning method that keeps specific page elements visible on screen as a user scrolls, while the rest of the page moves normally. For position: sticky to work the element needs to be enclosed inside another page element that acts as its container, such as a header or a section. The sticky element scrolls within that container and disappears when the container leaves the viewport (the parts of the page visible to the user).
CSS is a stylesheet language that controls how HTML pages look in the browser. If you were building a house, HTML would be the frame and the walls, while CSS would handle the paint, the furniture, and the lighting. Think of position: sticky as a CSS tool that anchors specific elements in place even as the rest of the room rearranges around them.
Sticky positioning is commonly used for:
-
Navigation bars. Locking your logo, search bar, and cart icon to the top of the screen keeps core navigation accessible as shoppers scroll.
-
Promotional banners. Sticky positioning lets you keep sales deadlines, discount codes, and other short-term elements visible throughout the browsing session.
-
Add to Cart buttons. Keeping the button always in view lets shoppers make buying decisions while scrolling long product pages and user reviews.
-
Filter and sort controls. Ensuring filtering options are always available lets shoppers refine searches without scrolling back to the top of product categories.
-
Order summary panels. A sticky sidebar showing product names, quantities, and total purchase amounts lets customers double-check their order while filling out shipping and payment forms.
-
Size and other selectors. Sticky positioning keeps color and size options visible while shoppers read product details and reviews further down the page.
What are the different CSS positioning values?
There are five positioning values you can use with custom style sheets, each with its own purpose.
Sticky positioning
Sticky positioning holds an element in place while the user navigates around the page. This type of positioning is conditional, which means the sticky element scrolls normally with the page until it hits a defined threshold, then stays put—but only as long as its parent container is in view. Once that container scrolls offscreen, the sticky element goes with it.
Static positioning
Static positioning is the default value. It tells the browser to leave the element exactly where it is placed in the page’s structure. Each element sits according to the normal document flow and ignores any positional instructions. There’s no reason to set it explicitly unless overriding another value.
Relative positioning
Relative positioning keeps the element in the normal flow of the page but lets you move it within its normal position. It’s like saying, “Stay where you are, but shift slightly up, down, left, or right by a specified number of pixels.” It is most commonly used as a positioning anchor for child elements—such as a “Sale” badge attached to a discounted product listing—rather than for moving things visually.
Absolute positioning
An absolutely positioned element is removed entirely from the normal document flow and placed relative to its nearest non-static parent. This means the element breaks free of the page layout and lets you place it wherever you want inside its parent container. Absolutely positioned elements are useful for overlays, badges, tool tips, and drop-down menus that need precise placement without affecting surrounding content.
Fixed positioning
Fixed positioning is similar to absolute positioning but anchors to the viewport rather than any parent element. Fixed positioning is best for persistent site-wide elements like cookie banners, floating chat buttons, and consent windows that need to stay in place as the page scrolls.
How CSS position: sticky works
Using the position: sticky property requires some familiarity with CSS and HTML. Each sticky element must sit inside a scrollable parent container and include at least one of the following four directional properties:
-
Top. The most common option is to lock the element to the top of the viewport after the user scrolls down a specified distance. This is useful for navigation bars, promotional banners, or search filters.
Bottom. The sticky element scrolls normally until it reaches a specified distance from the bottom of the viewport, then locks in place. Common uses include Add to Cart buttons and persistent checkout bars on mobile. -
Left. The page element sticks to the left edge of its container when the user scrolls horizontally. Useful for freezing the first column in a product comparison table so row labels stay visible as users scroll right.
-
Right. The sticky element locks to the right edge of its container during horizontal scrolling. You could use this to freeze the final summary column in a pricing or specifications table.
In each case, you need to specify a threshold value—the distance from the edge where you want sticking to activate. In some cases, you can also combine two directional properties. For example:
position: sticky;
top: 0;
left: 0;
This would lock an element to both the top and left edges simultaneously—useful for a corner element in a grid that scrolls in both directions.
Remember: the value you set is not where the sticky element starts. It’s the distance from that edge where sticking activates. The element travels normally until it hits that threshold, then stays put.
How to use a position: sticky element
The primary steps in implementing position: sticky are:
1. Select the page element you want to be sticky. Such as a button or a banner.
2. Choose at least one directional property and its threshold value. For example, Top: 0;.
3. Check the parent container. It must have scrollable content taller than the viewport, or sticking will never activate.
4. Adjust your overflow settings. If your parent container is set to overflow: hidden, change it to overflow: visible, auto, or scroll.
5. Add a z-index value if needed. This ensures sticky content stays on top when different page elements overlap.
Here’s how the CSS properties for a sticky navigation bar might look:
.nav-bar {
position: sticky;
top: 0;
z-index: 100;
background: white;
border-bottom: 1px solid #eee;
}
While implementing position: sticky requires some familiarity with CSS and HTML, Shopify offers resources to streamline the process. For example, adding custom CSS allows you to deploy custom styles. You can also edit theme code by making detailed changes to your online store using Liquid—Shopify’s templating language—along with HTML, CSS, JSON, and JavaScript.
CSS position: sticky FAQ
What is the difference between position: fixed and position: sticky?
When an element is tagged position: fixed it’s anchored permanently within the viewport, always visible regardless of where the user is on the page or how the parentcontainer is structured. But position: sticky is conditional: The element scrolls with the page up to a predetermined point, where it remains as long as its parentcontainer is in view. Once the user scrolls past the container, the sticky element moves offscreen.
Why is CSS position: sticky not working?
The most common cause for position: sticky not working is a parent element with incorrect overflow settings. When overflow is set to hidden, it breaks the scroll context that browsers need to activate sticky behavior. Other frequent causes include a missing directional property—such as top or right—or a parentcontainer that isn't tall enough to createscrolling content.
Is position: sticky widely supported?
CSSposition: sticky is supported by all major desktop browsers, including Chrome, Firefox, Safari, and Edge, making it safe to use for the vast majority of website visitors. It’s also fully supported on mobile browsers such as Safari on iOS and Chrome on Android.
