CSS position sticky not working: How to fix it?

Onur Demirkol
Feb 22, 2023

The "CSS position not sticky not working" error is very frustrating for many, and we are here to tell you how to fix it and get rid of it forever. Especially if you are familiar with programming, you know all the troubles it causes but don't worry, after reading the guide, you won't ever need to deal with it again.

CSS is a programming language used to arrange the visual elements of a web page, including page layout, visual design, fonts, and colors. It is written in HTML or XHTML and can be written in separate files with the .css file extension. It can also be included in the HTML document using a <style> tag. You might see some applications using the language CSS to style their web pages or even interfaces. If you want to learn more about it, you can check Mozilla's guide.

CSS position: sticky determines a positioning value that enables an element to hold a fixed position when the user scrolls within the viewport. The CSS position sticky not working error is caused by a conflict that sticks the element to the top or bottom of the viewport while the user continues scrolling. Let's look at the ways to fix it!

How to fix the CSS position sticky not working error?

Problem-solving is one of the most developed attributes of programmers, as they encounter countless errors caused by multiple reasons. The CSS position sticky error is also one of them that different reasons can cause. Below you will find some solutions related to the mentioned causes.

Browser compatibility

Starting with the basics, you must work on a browser that allows the position: sticky command. We listed the supported browsers below, and if you are not working with one of them, you might want to change your browser.

  • Google Chrome
  • Mozilla Firefox
  • Opera
  • Safari
  • Internet Explorer
  • Edge

Specify a threshold

The second basic solution for the CSS position sticky error is to make sure that you are specifying a threshold. You must provide a threshold to make the element sticky. One of the following attributes below must have a different value than "auto":

  • Top
  • Bottom
  • Right
  • Left

Safari Vendor Prefix

Even though Safari is a supported browser that you could use, you must include a vendor prefix for the property value to support Safari versions under 13. Using Safari isn't the only solution to eliminate the CSS position sticky not working error, as you need to maintain a healthy and compatible environment for the process.

Ancestor Element

Another thing that you can check is whether an ancestor element has an overflow property set. If any overflow properties below are set on the element's ancestor, you will face the CSS position sticky not working error.

  • overflow: hidden
  • overflow: scroll
  • overflow: auto

You can copy and paste the following code into your browser's web developer console:

let parent = document.querySelector(‘.sticky’).parentElement;

while (parent) {

const hasOverflow = getComputedStyle(parent).overflow;

if (hasOverflow !== ‘visible’) {

console.log(hasOverflow, parent);


parent = parent.parentElement;


Flexbox Parent Element

In some cases, the sticky element's parent is a flexbox, and there are two different solutions. The scenarios below could be the problem with your CSS position sticky not working problem; let's look at them separately.

  • The sticky element has align-self: auto set.
  • The sticky element has align-self: stretch set.


The sticky element has align-self: auto set

As a result, you would see the CSS position sticky not functioning problem since the align-self value would be equivalent to the align-items value of the parent. Therefore, the sticky element's height will expand to fill the entire space if the parent has align-items: stretch or align-items: standard set. This would prevent the sticky element from scrolling inside the parent.

The sticky element has align-self: stretch set

In this case, the sticky element would stretch to the parent's height, eliminating any scrollable area surrounding it.

The CSS position sticky not working error could be solved with any of the solutions above. Don't forget to try all!


Previous Post: «
Next Post: «


  1. Khan Zain said on February 3, 2024 at 12:08 pm

    “Onur Demirkol’s guide on troubleshooting the ‘CSS position sticky not working’ error is a gem for web developers grappling with this issue. The article not only identifies the common causes but also provides clear and comprehensive solutions, showcasing Demirkol’s expertise in CSS problem-solving.

    The breakdown of potential issues, such as browser compatibility and the importance of specifying a threshold, demonstrates a deep understanding of CSS intricacies. Demirkol’s inclusion of practical tips, like checking ancestor elements for overflow properties and addressing flexbox-related problems, adds a hands-on dimension to the troubleshooting process.

    Demirkol’s writing style is accessible and engaging, making the technical details approachable for developers of varying expertise levels. The article not only serves as a quick reference for those facing the ‘CSS position sticky not working’ issue but also encourages a thorough exploration of potential solutions.

    Overall, Onur Demirkol’s guide is a must-read for developers seeking clarity and effective remedies for this common CSS challenge. The step-by-step approach and attention to detail make it a valuable contribution to the web development community’s knowledge base.”

  2. John G. said on February 23, 2023 at 12:01 am

    I have seen the browser Safari mentioned in the article and my father has remembered those times when Safari was available and maintained for Windows 7. It’s a pity that it’s not available for Windows 10/11 nowadays, it was a great browser in the past and it worked nice with CSS and so forth. Thanks for the article by the way.

    /wrote using Firefox 103 and Ubuntu 22.04 from the forest at the mountain! :]

  3. Robert Wellock said on February 22, 2023 at 8:55 pm

    Where are you coming across the strangely coined “CSS position not sticky not working” error, its background story is not clearly explained within the article… Most people are not designing the web page or using a console.

    Cascading Style Sheets (CSS) is a ‘style sheet language’; it is not a “programming language” – your article is inaccurate. See the following: https://www.w3.org/standards/webdesign/htmlcss#whatcss

    (X)HTML is completely different (separate) to CSS; (X)HTML is a structural markup language (not a programming language): https://www.w3.org/standards/webdesign/htmlcss#whathtml

    “[…] CSS is a programming language […]. It is written in HTML or XHTML and can be written in separate files with the .css file extension. …”

    Onur, your second paragraph is mostly gibberish… you might want to consider rewriting that paragraph, so it doesn’t imply further “misleading information”. HTML documents may contain style sheet rules directly in them or they may import style sheets. You also probably mean ‘web author’ rather than “programmer” with regards to CSS layout.

    It’s mostly it’s your terminology that is incorrect (or displaced) making the article very confusing to comprehend. You haven’t clearly explained about vendor prefixes or ‘CSS Flexible Box Layout model’ either (https://www.w3.org/TR/css-flexbox-1/). It’s like you are missing out several important concepts within the article [https://caniuse.com/flexbox].

    The position ‘property’ specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). The sticky is a ‘value’.

    Aside: the link text “HTML” leading to [https://www.ghacks.net/2022/12/22/create-encrypted-messages-images-files-as-html-with-portable-secret/] is distracting, and completely irrelevant.

    Martin, it’s mildly annoying your default CSS isn’t allowing semantic markup to display differently. For example, EM (Indicates emphasis) or STRONG (Indicates stronger emphasis). Typically, the former is rendered is as ‘italic’ and the latter ‘bold’ text in Visual Browsers.

    I’m respected regarding my knowledge on semantic HTML markup, and have judged several such related competitions on SitePoint.

    1. Khan Zain said on February 3, 2024 at 12:13 pm

      “Constructive feedback for Onur Demirkol and Martin Brinkmann: While the article on fixing the ‘CSS position sticky not working’ error attempts to address a common issue faced by web developers, there are some inaccuracies and lack of clarity that may confuse readers. The use of the term ‘CSS programming language’ is incorrect, as CSS is a style sheet language, not a programming language, as outlined by W3C standards.

      Additionally, the background story of where users might encounter the problem is not sufficiently explained. It would be beneficial to provide context for a broader audience beyond web designers or those familiar with console usage.

      Furthermore, the article mentions HTML and XHTML interchangeably, but it’s crucial to emphasize that they are separate entities – HTML being a structural markup language and CSS serving as a style sheet language.

      There is room for improvement in explaining concepts like vendor prefixes and the ‘CSS Flexible Box Layout model’ for a more comprehensive understanding. Adding links to relevant resources, such as the W3C documentation or popular compatibility websites like Can I Use, would enhance the article’s educational value.

      For Martin Brinkmann, addressing default CSS styles that impact the rendering of semantic HTML markup, like EM and STRONG, could contribute to a more visually appealing and semantically correct presentation.

      Finally, consider exploring platforms like W3Schools( https://www.w3schools.com/html/html_css.asp ), JavaTpoint( https://www.javatpoint.com/html-css ), and IQRA Technology( https://iqratechnology.com/academy/html-training/html-css/ ) for additional insights and resources to enrich the content and provide a more accurate and well-rounded guide for readers interested in CSS troubleshooting.”

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.