If you're experiencing issues with the CSS position: sticky
property, there are several factors you can examine to troubleshoot some common problems. You can consider the following checklist to address potential issues:
- Checking for Browser Compatibility;
- Checking if a Threshold Has Been Specified;
- Checking Vendor Prefix for Safari;
- Checking if an Ancestor Element Has
overflow
Property Set; - Checking if
height
Property Is Not Set on Parent; - Checking if a Parent Element Is a Flexbox;
- Check for Overriding Rules.
Checking for Browser Compatibility
Prior to investigating other potential problems, ensure that you are using a browser that supports the position: sticky
property.
Checking if a Threshold Has Been Specified
A sticky element requires a threshold to be specified, which means that you must set a value other than "auto
" for at least one of the following properties:
top
right
bottom
left
For example:
.sticky { position: sticky; top: 0; }
The threshold value that you set, will make the sticky element act as fixed positioned when it crosses the specified threshold, and a relatively positioned element otherwise.
Checking Vendor Prefix for Safari
Make sure you add a vendor prefix for the property value to support versions of Safari below 13, for example, like so:
.sticky { position: -webkit-sticky; position: sticky; top: 0; }
Checking if an Ancestor Element Has overflow
Property Set
If any parent/ancestor of the sticky element has any of the following overflow
properties set, position: sticky
won't work (unless you specify a height on the overflowing container):
overflow: hidden
overflow: scroll
overflow: auto
Snippet to Check for Parents With overflow
Property Set:
Simply copy/paste the following snippet in your browser's web developer console to identify all parent/ancestor elements with overflow
property set to something other than visible
:
let parent = document.querySelector('.sticky').parentElement; while (parent) { const hasOverflow = getComputedStyle(parent).overflow; if (hasOverflow !== 'visible') { console.log(hasOverflow, parent); } parent = parent.parentElement; }
How to Make position: sticky
Work With the overflow
Property?
By specifying a height on the overflowing container, you should be able to make position: sticky
work whilst having the container element have the overflow
property set.
Checking if height
Property Is Not Set on Parent
If the parent element has no height
set then the sticky element won't have any area to stick to when scrolling. This happens because the sticky element is meant to stick/scroll within the height of a containing element.
Checking if a Parent Element Is a Flexbox
If sticky element's parent is a flexbox, there are two scenarios to check for:
- The sticky element has
align-self: auto
set (which is the default); - The sticky element has
align-self: stretch
set.
If the Sticky Element Has align-self: auto
Set:
In this case the value of align-self
would compute to the parent's align-items
value. So, if the parent has align-items: normal
(which is the default) or align-items: stretch
set, then it means the height of the sticky element would stretch to fill the entire available space. This would leave no room for the sticky element to scroll within the parent.
If the Sticky Element Has align-self: stretch
Set:
In this case, the sticky element would stretch to the height of the parent, and would not have any area to scroll within.
How to Make Sticky Element Scrollable Within a Flexbox:
You could simply set the value of the align-self
property to align-self: flex-start
. This would put the sticky element at the start and won't stretch it.
Checking for Overriding Rules
You can make sure that the element you are applying the position: sticky
property to is not being overridden by a more specific selector.
For example, consider the following HTML/CSS:
<div id="parent"> <div id="child-1">Foo</div> <div id="child-2">Bar</div> </div>
#child-1 { position: sticky; top: 0; }
It could be the case, for example, that another CSS selector with higher specificity is overriding your selector and the CSS style rules on the element, such as the following:
#parent #child-1 { position: relative; }
To fix this, you can either remove the more specific selector, or make your selector more specific than the other one.
This post was published (and was last revised ) by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.