position sticky not working on safari

• Web Development

How to Fix Issues With CSS Position Sticky Not Working?

• Daniyal Hamid
• 05 Feb, 2024

The CSS position: sticky may not work for a number of reasons. You can consider the following checklist to address potential issues:

• Check for Browser Compatibility ;
• Check if a Threshold Has Been Specified ;
• Check if Parent or Ancestor Element Has overflow Property Set ;
• Check if Sticky Has Enough Room to Scroll Within ;
• Check if the Sticky Element Stretches Inside a Flexbox ;
• Check for Overriding Rules .

Checking for Browser Compatibility

Check that the browser you're using supports position: sticky .

Known Issues

Missing vendor prefix for safari 13 and below.

In Safari 13 and below, a vendor prefix ( -webkit-sticky ) is required in addition to position: sticky :

Sticky Table Headers Issue

Firefox 58 & below, Chrome 63 & below and Safari 7 & below do not appear to support sticky table headers:

Check if a Threshold Has Been Specified

A sticky element requires a threshold to be specified for properties like top , right , bottom , and left . 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. You can see in action in the following example:

Failure to set a threshold can make the sticky element behave similarly to relative positioning:

Therefore, you must set a value other than " auto " for at least one of, top , right , bottom , or left properties for position: sticky to work. For example:

Check if Parent or Ancestor Element Has overflow Property Set

If a parent or ancestor of the sticky element has overflow: hidden , overflow: scroll , or overflow: auto , the sticky might not work. You can see this issue in the following example:

To diagnose and fix this issue, you can do the following:

Find Parent or Ancestors With overflow Property Set

You can 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 :

Add a height for the Overflowing Container

By specifying a height on the overflowing container(s) you identified in the previous step, you should be able to make position: sticky work without having to remove the overflow property from the container element.

Consider, for example, the following where setting the height on the overflowing element (e.g., " #parent ") fixes the issue:

For detailed explanation and examples, check out the post about fixing CSS position: sticky not working with overflow .

Checking if Sticky Has Enough Room to Scroll Within

If the sticky element does not have enough room to scroll within, it won't work. This could be the case when:

Sticky Element Has Same or Larger Height Than the Parent

This will make all children of " #parent " (including the sticky element) the same height , producing an output like the following:

Sticky Element Is Stretched to Same Height as Parent

This will make the sticky and the parent element the same height , producing an output like the following:

In these cases the sticky element ends up having no room for scrolling within its container. Therefore, to make the sticky work in these instances, you can make the height of the sticky smaller, or make the height of the parent larger. For example:

This will make the height of the sticky element smaller than its siblings, giving it room inside its container to stick within:

As a rule of thumb, the parent element should always have a larger height than the sticky element for it to work.

Checking if the Sticky Element Stretches Inside a Flexbox

If sticky element's parent is a flexbox, then you must make sure that it does not stretch to occupy the entire height of its container. Otherwise, it will leave no room for it to move within. This can be the case in the following scenarios:

Parent Has align-items: normal and Sticky Has align-self: auto

The flex parent and sticky element default to align-items: normal and align-self: auto respectively. So, when you implicitly or explicitly specify these values, position: sticky won't work:

Parent Has align-items: stretch and Sticky Has align-self: auto

When the flex parent explicitly has align-items: stretch and the sticky element implicitly or explicitly has align-self: auto set, position: sticky won't work:

When Sticky Has align-self: stretch

When the sticky element is has align-self: stretch set, it takes precedence over parent's align-items value, resulting in the sticky element being stretched to fill the container. This leaves no room for sticky to scroll within:

To fix all these issues, you can simply set the value of the align-self property of the sticky element to a value that does not make it stretch. For example, you could set align-self to flex-start , making the sticky element position at the start and not be stretched:

For detailed explanation and examples, check out the post about fixing CSS position: sticky not working in a flexbox .

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:

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:

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 26 Apr, 2020 (and was last revised 05 Feb, 2024 ) 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 .

If you've ever tried sticky positioning, then you have probably wondered why CSS position: sticky is not working for your web design. It's because an ancestor element has one of the following values for the overflow property: hidden , scroll , or auto .

That's disappointing, because you really needed that overflow-x: hidden on the <body> -tag or on any other wrapper, to prevent horizontal scrolling due to overflowing content..

How to make position: sticky work with an ancestor's or parent's overflow: hidden?

Some articles claim that the solution to this is to make sure that the ancestor or parent element has a specified height. However, that's not what you want to do (right?), because you don't want to set a fixed height on the sticky element's ancestor or parent element.

There is, however, a rather new value for the overflow -property - it's called: clip .

This new value completely solves this problem. Unfortunately, there is a but to this one.

Browser support for CSS declaration  overflow: clip

Let me tell you, at the time of writing this (October 2021), the support for this new CSS property is 73.09% globally. Which is not enough to implement this without a fallback.

Who are the evildoers, you ask me?

• Safari on iOS (13.83%)
• Safari (4.07%)
• Google Chrome versions 4 - 89 (3.1%)
• Samsung Internet versions 4 - 14.0 (1.14%)
• Internet Explorer (0.93%)
• Opera versions 10 - 75 (0.47%)
• Android Browser versions 2.1 - 4.4.4 (0.28%)
• Opera Mobile (0.01%)

Source:  https://caniuse.com/mdn-css_properties_overflow_clip

There is, however, another rather new CSS property: contain . If you use contain: paint , then all the descendants that overflow the container, will get clipped to the border-box.

Sadly, this CSS property is also not supported by Safari. It has been around in Google Chrome since version 52, though. So that's a slight improvement compared to overflow .

Also, contain is a CSS property that is used for improving performance, not necessarily for controlling overflow of content. It has no way to determine whether to clip on the x-axis or the y-axis, unlike you can with overflow-x and overflow-y with value clip .

If you are interested in improving the performance of your web design, consider reading a post about lazy-rendering using content-visibility: auto and contain-intrinsic-size .

Overflow: clip vs overflow: hidden

The clip value does the same as the hidden value, except for that it completely disables any form of scrolling. The hidden value only disables scrolling for the user, while keeping the option for programmatic scrolling, thus making it a scroll container.

Since it is now a scroll container, it needs a specified height in order for position: sticky to work. You did not specify a height to the scroll container, and why would you?

Mozilla Firefox versions 80 and lower have a non-standard name for value  clip , which perfectly describes what it actually does: -moz-hidden-unscrollable .

It hides the overflowing content, but does not turn the element into a scroll container.

So, the clip value does not make it a scroll container, so the window is still the scroll container. Your viewport, that is the default scroll container. It has a specified height too.

What am I supposed to do now?

If you really want position: sticky to work on all modern browsers, then you should consider not using overflow: hidden on the <body> or any wrapper surrounding the main content, but rather put a wrapper around elements that will overflow the viewport.

Then, those wrappers should use overflow: hidden . If those wrappers contain elements that use position: sticky , then I feel sorry for you; I guess it's time to wait for support.

Use overflow: hidden as a fallback for overflow: clip

If you do not feel like wrapping every single element that overflows the viewport, and you find it okay if sticky elements won't work on some specific modern browsers, then I suggest using hidden as a fallback for browsers that do not support overflow: clip .

Elements with position: sticky will, in this case, not work for browsers that do not support overflow: clip . If this is something that you prefer over manually wrapping all elements that overflow the viewport, then that is completely understandable.

If some sticky elements won't work on Safari for iOS (13.83%) then that's not that big of a deal, since it's uncommon to use sticky elements on mobile devices anyways (except for maybe the header). Of course, there are tablet devices that could use sticky elements at some places, but tablet devices are rarely used (2.52% as of September 2021).

So, we could add like 13.83% (Safari for iOS) to the 73.09% of global support to get a more likeable percentage of users who won't be affected by the lack of browser support for the new value clip for CSS property overflow : 86.92%. That's more like it!

Source:  https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet

Luckily the global use of the desktop version of Safari is only 4.07%, so if a sticky element doesn't work on that browser, then that shouldn't be the end of the world.

Provide a prefixed version of sticky for older Safari browsers

It is necessary to provide a prefixed version of position: sticky for Safari browser versions 6.1 - 12.1 (0.2%) and Safari for iOS versions 6 - 12.5 (1.35%): -webkit-sticky .

CSS position: sticky not working; is it a big deal?

If CSS position: sticky  doesn't work on some browsers, does it hurt your web design's UX ?

Sticky elements are handy, sure, but is the element still usable on browsers that do not support position: sticky at all? It is often still usable, but if you use elements with position: absolute within them, then it's parent's position is no longer sticky , it's static .

This is far fetched, since you probably don't care about browsers that don't even support position: sticky ; browsers like Internet Explorer and very outdated modern browsers.

If you do care about those older browsers, then it's a good practice to provide position: relative as a fallback and apply properties  top , right , bottom , and left on the sticky element only if the browser supports either sticky or -webkit-sticky for  position .

Otherwise, if the element is relatively positioned instead of sticky, it will move because of the CSS properties  top , right , bottom , and left . This is an example:

Now, for browsers that do support position: sticky , but do not support overflow: clip , the sticky element will just not be sticky. So the web page should work just fine.

It's time to wrap it up. I hope I didn't overflow you with too much information. Do you want to learn more about unique CSS solutions every once in a while? Then do stick around!

Random fact: RSS is (coming) back to Google Chrome, so follow us if you'd like!

Fixing CSS position sticky not working issues

Position:sticky CSS property is commonly used to create sticky headers or footers. We will go over a few problems and solutions when using this property.

🔔 Table of contents

There are several possible solutions to fix position:sticky not working in CSS. This is depending on the source of the issue. Here are some suggested steps to try:

You are not specifying at least one of the CSS properties: top , left , right or bottom . Be careful though if you specify more than one of those. If both left and right are specified, left wins. Likewise, if top and bottom are used at the same time, top wins - Based on this bug

For not working in Safari browsers, you are not specifing the -webkit-sticky browser prefix. To be sure that you have covered all browsers, we can use the following declaration:

Internet Explorer, Edge 15 and earlier versions do not support sticky positioning

The parent element does not have it height or position:relative specified. This would need to apply to all parent elements of the sticky element and not just the immediate ancestor.

The parent element, such as a div is using the flex display. We need to also set the sticky element to have align-self: flex-start .

If the previous options are not working, it could be due to your z-index. Try adding a z-index property to your sticky element with a value greater than 0. This will help ensure that your element is above any other elements on the page.

What is the position:sticky anyway?

Elements that are defined with position sticky are positioned normally based on the document flow. It will then “stick” with its nearest parent element’s scroll behaviour.

Below is a demo of how it should behave:

We can lay it out as follows:

Check if using position:sticky with flex

When the parent element of a position sticky element is set as flex display, this will not work unless you have set the right CSS properties.

Consider the following HTML and CSS, we have the main element as display:flex and we want to make the child yellow element sticky

This results in the above - we can see that the yellow element is not sticking at all. It just takes the height of the main element.

Since flex box elements default to stretch , all the elements are the same height - which does not allow scrolling and thus the sticky behaviour would not kick in.

Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling will fix it. The align-self: flex-start property overrides the flex item’s align-items value. In this case we use flex-start which put the flex item at the start of the parent.

Check Position:sticky with overflow (hidden, scroll or auto)

On the parent of the sticky element, AVOID using overflow:hidden , overflow:scroll , or overflow:auto .

Since sticky elements rely on the scrolling of the parent element - modifying overflow behaviour will break this.

However using overflow:visible or overflow:clip should be fine to keep your sticky elements desired behaviour.

Safari browser support for position:sticky

Support for position:sticky is widespread for most of the modern browsers (Chrome, Firefox, Edge, etc) however there are some cases we will need to consider. For Safari browsers, its best to use the vendor prefixes (-webkit-sticky):

There are other support issues that we need to consider when using this position:sticky :

• No support for IE 11 or lower versions
• Supported on th elements, but not thead or tr in Edge/Chrome
• Do not appear to support sticky table headers

The Javascript (old method)

We can use Javascript to mimic the same behaviour as position:sticky . This can be handy when you want to support older browsers such as IE or older versions of Safari.

The idea is to have a event listener on the scroll. As the user moves out of the viewport (scroll down), we apply a position:fixed to that element we want to stick.

As the user scrolls up and goes back into the view, we remove the position:fixed styling.

This method is not prefered since it can make your page look janky since processing is done on the CPU side.

Using the default position sticky will shift process to the GPU (Graphical Processing Unit) and will appear more smooth.

Position sticky CSS property is commonly used for navigation or footers - making them stick to the viewport as the user scrolls. There are several solutions or things to check when you have encountered problems trying to implement this. Some steps we can go through includes:

• check the top, left, right and bottom is set,
• check the browser support - or use JavaScript if you want to support legacy browsers such as IE
• check that the parent is using flex or not - if flex is used, then the sticky element needs to have align-self:flex-start
• Make sure you are NOT using any overflow properties on the parent.

👋 About the Author

G'day! I am Huy a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

Follow along on Twitter , GitHub and YouTube

👉 See Also 👈

• 9 CSS Round Button Examples
• How to Create CSS Animation Fade In with Examples
• [Fixed] CSS :after element is not working
• CSS pulse animation on hover
• Creating gradient animation with CSS
• How to Center a Button with CSS

CSS position:sticky

Keeps elements positioned as "fixed" or "relative" depending on how it appears in the viewport. As a result the element is "stuck" when necessary while scrolling.

• 4 - 22 : Not supported
• 23 - 36 : Disabled by default
• 37 - 51 : Not supported
• 52 - 55 : Disabled by default
• 56 - 90 : Partial support
• 91 - 122 : Supported
• 123 : Supported
• 124 - 126 : Supported
• 12 - 15 : Not supported
• 16 - 18 : Partial support
• 79 - 90 : Partial support
• 3.1 - 6 : Not supported
• 6.1 - 7 : Partial support
• 7.1 - 12.1 : Supported
• 13 - 17.3 : Supported
• 17.4 : Supported
• TP : Supported
• 2 - 25 : Not supported
• 26 - 31 : Disabled by default
• 32 - 58 : Partial support
• 59 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 9 - 38 : Not supported
• 39 - 41 : Disabled by default
• 42 - 77 : Partial support
• 78 - 107 : Supported
• 108 : Supported
• 5.5 - 10 : Not supported
• 11 : Not supported

Chrome for Android

• 122 : Supported

Safari on iOS

• 3.2 - 5.1 : Not supported
• 6 - 7.1 : Partial support
• 8 - 12.5 : Supported

Samsung Internet

• 4 - 5.4 : Not supported
• 6.2 - 22 : Supported
• 23 : Supported
• all : Not supported

Opera Mobile

• 10 - 12.1 : Not supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 - 4.4.4 : Not supported

Firefox for Android

• 14.9 : Partial support

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Partial support
• 3 : Supported

Any ancestor between the sticky element and its user-scrollable container with overflow computed as anything but visible / clip will effectively prevent sticking behavior.

Solution to why CSS ‘position: sticky’ is not working

This post contain affiliate links to Udemy courses , meaning when you click the links and make a purchase, I receive a small commission. I only recommend courses that I believe support the content, and it helps maintain the site.

An issue that took far longer than it should have to solve.

I was using the CSS position: sticky on my header so it moved down as the user scrolled. However when I added the mobile menu which transitioned in from the right, the sticky header broke. Could not understand why!

Turns out sticky does not play nicely with most overflow values.

If you are trying to use position: sticky and it is not working, it is because one of the elements wrapping it is using overflow with a value of hidden , auto or scroll .

How to solve the CSS position sticky issue?

There is a new (ish) value that can be used with overflow . It is clip .

As Mozilla puts it in their documentation :

Similar to hidden, the content is clipped to the element’s padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling. The box is not a scroll container, and does not start a new formatting context. If you wish to start a new formatting context, you can use display: flow-root to do so.

Is Clip supported on all modern browsers.

At time of writing (23/11/2022) all current versions of modern browsers support this functionality. Take a look at Can I Use if you want to check for yourself.

Still not working?

If it is still not working, you may need to double check that a placement position has been set. This can be left , right , bottom , or top as a minimum. This could look like:

Hopefully this helped you, and if you have any questions you can reach me at: @robertmars

Related Posts

Using AI to Write Content: Introduction to AI Copywriting

Using WordPress Shortcode Functionality in Gatsby

To Sticky or Not to Sticky

5 Reasons your CSS Sticky Position won’t work

Sticky positioning is a popular CSS property that is used to keep an element in a fixed position while the rest of the page scrolls. However, sometimes the sticky position just doesn’t seem to work as expected. In this post, we’re going to cover five reasons why your sticky position may not be working.

Sticky Position Not Working? Here Are 5 Reasons Why

No threshold specified

A sticky element requires a threshold to be specified in order for it to work. The threshold specifies the distance between the sticky element and the top, bottom, left, or right of its containing element. For example, if you want an element to stick to the top of its containing element, you need to set a threshold of a certain number of pixels from the top. If no threshold is specified, the element will not stick. e.g.

Ancestor has an overflow property

If an overflow property is set on any of the ancestors of the sticky element (the parent or grandparent etc.), the sticky position will not work. It doesn’t matter what value you set for the overflow property, as long as it is set, the sticky position will not work.

Sticky container is a flex item or grid item with align-items set to stretch

If the sticky container is a flex item or grid item with align-items set to stretch, the sticky position will not work. This is because all the items are stretched from the beginning to the end, and there is not enough room for the sticky element to stretch.

Sticky element does not have enough room to stick

If the sticky element does not have enough room to stick, it will not work. This can happen if the parent has no height or if the height of the parent is the same as the sticky element. The sticky element typically sticks within the height of its container.

Missing vendor prefix

Finally, if a vendor prefix is missing, the sticky position may not work. For example, from Safari 13 and below, you need to add a prefix to the property value for it to work. If your sticky position is working in some browsers but not others, make sure you check for missing vendor prefixes. E.g.

In conclusion, sticky positioning can be a powerful tool for keeping elements in place while scrolling. However, if your sticky position isn’t working as expected, one of these five reasons could be the culprit. Make sure you double-check your code and see if any of these issues apply to your situation.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Popular Searches:

Popular resources.

Trending Tutorials

Position sticky not working in Safari

Hello everyone, I’m having some trouble with the position sticky only on Safari, in Chrome it is working fine. Position sticky has been applied to the blue square. I’ve been reading through other forum posts about the same issue but none of the fixes worked for me. I would really appreciate some help. Many thanks!

Here is my site Read-Only: https://preview.webflow.com/preview/organicintelligenceagency?utm_medium=preview_link&utm_source=designer&utm_content=organicintelligenceagency&preview=f117779547f9e96e29a6efabc1bc4bcd&pageId=60abd6dbdf97e31a1f03325a&itemId=60abe1a784da506c04ba9227&workflow=preview[1] ( how to share your site Read-Only link )

Hey Filipa! opening the preview the sticky seems to work fine on both safari and chrome

can you also share the published link of the affected page?

Hi Maria, Thank you so much for your reply. I’m new to the forum and it took me a couple of days to realize I had a reply, so sorry. There’s something fishy with my macbook safari, it is not opening now altogether so it seems to be a bug on my end. In any case, I’ve been upgrading the design and I have no issues on my ipad’s safari now. Appreciate your feedback. Much love!

• Mobile Computing

• Good to know
• VPN for streaming
• VPNs for gaming
• Privacy news
• VPN reviews
• Windows 11 News
• Windows 11 Help
• Windows tips
• Windows Update
• Data Recovery
• File Sharing
• Microsoft Office
• Firefox add-ons
• Chrome Extensions
• Internet Explorer
• Microsoft Edge
• Google Maps
• Google Android
• Thunderbird
• Crypto & Blockchain
• Development
• Music and Video

CSS position sticky not working: How to fix it?

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

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":

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!

Related content

Github Copilot vs ChatGPT: Which one is better for coding?

Voice actors are training the AI which will be their replacement

Several Visual Studio versions reach end of support in 2022 and 2023

Benchmarks indicate big performance improvements in .NET 6

Microsoft releases .NET 5.0 Final

GitHub Mobile for Android and iOS stable is now available

“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.”

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! :]

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.

“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 Cancel reply

Save my name, email, and website in this browser for the next time I comment.

Advertisement

Spread the word, hot discussions.

Recently Updated

Latest from Softonic

• Google Chat adds one of the most used functions in WhatsApp

About gHacks

Ghacks is a technology news blog that was founded in 2005 by Martin Brinkmann. It has since then become one of the most popular tech news sites on the Internet with five authors and regular contributions from freelance writers.

• Legal Information
• Terms of use
• Privacy Policy
• Cookie Policy
• Cookie settings
• Advertise with Us
• Martin Brinkmann
• Mike Turcotte

Table of Contents

In this tutorial you are going to learn how to troubleshoot position:sticky elements that just won't stick as they are expected to.

Why isn't position:sticky working?

The first step is to understand the issue. 90% of the time, position:sticky isn't working because an ancestor element is set to overflow: something other than 'visible' .

Sometimes, it's because the position:sticky element has the same height as its parent. More on this below.

Getting technical

If any parent element of a sticky element has its overflow property set to auto , scroll , or hidden, it establishes a new scrolling context .

In this context, the sticky element's sticky behaviour is restricted to the bounds of this parent element, the one with the scrolling context.

This is true even if that parent element with overflow:hidden (or the likes) does not have any scrolling at all! It's still a new scrolling context, and the position:sticky element will now rely on it rather than the viewport*  to try and 'stick'.

*Technically, the root element's own scrolling context. position:sticky is always relative to some scrolling context . The closest one, when going back up the DOM tree.

How to fix position:sticky not working?

To troubleshoot this, simply go into your page where you have a problem, and copy paste this code in the Devtools console (F12). Then press 'Enter'.

The code automatically looks for all elements on the page with position:sticky, and then goes up through their ancestors to see if any has overflow set to something other than visible.

That will return you a message like this:

Pointing you to the exact element(s) that have overflow set to something other than visible.

The actual fix

Now, to fix the issue, simply adjust your CSS so that these elements have the default overflow value of overflow:visible, instead of something like overflow-x:hidden;

Often, the culprit is CSS that looks like this:

You will want to delete that CSS for position:sticky to work on your page.

You can either delete the CSS you will find, or if you can't delete it (ie if it comes from a theme or plugin) you will need to override it:

And you will need to find another way to fix your horizontal scrolling issues , see that tutorial for help with that.

When the problem is the height of the position:sticky; element

If the above didn't fix your issue, then the problem might be that the position:sticky element is the exact same height as its parent element, so there is no 'room' for it to stay sticky in.

The whole point of position:sticky; is that the element becomes sticky in the 'available space' within its parent.

This issue is usually because the parent element is set to display:flex; , but isn't set to align-items:flex-start; . The default of "stretch" will be applied, and the sticky children element won't have any room to be 'sticky' in.

Fix: set the parent element to align-items:flex-start;

I hope you found this helpful!

Element.how also provides premium tutorials showing awesome advanced designs , check them out here .

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

15 Responses

Thank you for your great work. I have a small issue, it doesn't work on Chrome, although it works on Chrome but only in private mode! and doesn't work on android in any mode, although it works on iPhone!

Sounds like some cache issue...

Do you get any message when you copy paste the code in the console, as in the tutorial?

What's the URL?

Thank you for taking the time to look at my problem.

I am not getting any message in the console. But! My bad... It works also in desktop Chrome, i was logged in my site and the bar of wordpress admin apparently has something to do with the height of the sticky tabs and they were going above the screen.

Hmm i need to check if that happens to users also.

About mobiles, In two different models iPhone works perfect in Safari and Edge but not in two different models of Android Brave, Chrome, Firefox, Edge, Samsung stock browser as i tried all those.

When you swipe down it seems that the sticky tabs go just above the screen because when you swipe down the sticky tabs are showing again as you go up.

P.S. you have a type error at this page in your code, html body { overflox-x: visible; }

at the overflow its overflox.

My site is https://thegreeks.com.au

Thank you again for your work and your time.

[...]because when you swipe down the sticky tabs are showing again as you go up

Okay, in this case, the bug is elsewhere... position:sticky; is working, and the information I present in this tutorial won't help you further.

I had a look and the issue is some kind of overflow on the page. You can scroll to the right.

Debugging further it looks like the problem is from the "Search our Classifieds" form. The "search" button overflows on the right, and creates the issue you are seeing with the sticky nav bar.

Fix this overflow and the issue should resolve.

Thanks for this! I fixed it.

Thank you Maxime,

Overflow of the classifieds did the trick!

I just set it to hidden at that section and its perfect now.

Maxime, out of curiosity, would it be possible for the sticky tabs to stick to the bottom part of the screen at mobile phones?

The reason for that is, with the screen size of new phones, it's quite an adventure for your thumb to stretch to the top of the screen to change tab 😀

For desktop is good with the mouse.

Yes, add this below the custom CSS you currently have to make the tabs title sticky:

Thank you for that but doesn't do anything! The tabs are still sticky to the top of the screen and not at the bottom.

Am I doing something wrong?

Kind Regards

Not certain... worked for me when I added it to the front end of your site in the devtools, where did you add it? Where are you looking? On a very old browser it won't work as it won't support the dvh unit, but that's unlikely the issue here...

I added to the themes customize css and i checked it at an android phone samsung galaxy note 20+ and an iPhone 12, both chrome and edge.

But is it directly below the other similar CSS you had already for that element, to make it sticky?

I added to themes Additional CSS like this:

html body { overflow-x:visible; }

@media (max-width: 767px) { .e-n-tabs-heading {   top: calc( 100dvh - 30px ); } }

You mean to add it to the original script that goes inside the page?

Yes, add it here: https://pasteboard.co/tldGTNdnu7a7.png

Now it's working perfectly.

Cheers Maxime!

Thank you so much for your time and effort.

Leave a Reply Cancel reply

You must be logged in to post a comment.

© Copyright 2024 Element How Privacy Policy | Terms & Conditions

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Why doesn't "position: sticky" work in Safari?

There's a CSS property called position: sticky that makes things stick to the top of the browser window (like a navbar) while scrolling. Using the Developer tools, it shows that "position: sticky" is invalid in Safari. This works fine in Chrome and Firefox, but for some reason not in Safari.

I have Safari 12.1.1 running on macOS Mojave 10.14.5.

I've also tried position: webkit-sticky but Safari also thinks that is an invalid CSS property.

iMac 27", macOS 10.14

Posted on Jun 21, 2019 11:43 AM

CSS position sticky not working: How to fix it?

Css position: sticky is a positioning value that allows an element to remain in a fixed position within the viewport as the user scrolls but if its written wrongly it could cause numerous problems for your website..

If you are closely related to programming, you are familiar with CSS and you know how annoying CSS position sticky not working error could be, but let us briefly explain CSS for our readers who are new to programming.

CSS is primarily used to style and layout web pages written in HTML or XHTML. It can be used to control the colors, fonts, spacing, and other visual elements of a website. CSS can be written in separate files with the .css file extension and linked to the HTML documents, or it can be included within the HTML document itself using a <style> tag. CSS can be used to style not only HTML pages but also XML documents, SVG, and XUL. Some applications also use CSS to style their user interface.

CSS can be used to create responsive designs that adapt to different screen sizes and devices, and it can be used to create animations and other dynamic effects on web pages. CSS position: sticky is a positioning value that allows an element to remain in a fixed position within the viewport as the user scrolls. Once the user scrolls to a certain point, the element “sticks” to the top or bottom of the viewport, and remains there as the user continues to scroll.

Here’s Mozilla’s guide on CSS .

To use position: sticky, you need to set the position property to “sticky” and also specify one of the top, bottom, left, or right properties to tell the browser where the element should stick to. If you have done all the instructions we mentioned correctly but you are still encountering the CSS position sticky not working error, let us explain how to fix it for you.

How to fix the CSS position sticky not working?

You might be encountering the CSS position sticky not working issue for a variety of reasons. You can check the items on the list below to resolve some typical or prospective problems when using it:

Check for browser compatibility

Make sure that you are specifying a threshold, control the vendor prefix for safari, check if an ancestor element has an overflow property set or not, make sure the parent element is a flexbox.

It could be a good idea to confirm if you’re using a browser that supports position: sticky before looking for any fixes for the CSS position sticky not working issue. These browsers support the CSS position sticky line:

• Internet Explorer

A threshold must be provided in order for an element to be sticky, therefore at least one of the following attributes must have a value other than “auto”:

If you encounter the CSS position sticky not working issue while using Safari then you must include a vendor prefix for the property value to support Safari versions under 13.

If any of the following overflow properties are set on the sticky element’s parent or ancestor, Position: sticky will not work.

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

Simply copy and paste the following code into your browser’s web developer console to locate all parent elements with the 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;

If the sticky element’s parent is a flexbox, keep an eye out for either of the following two scenarios could be the reason why you are encountering the CSS position sticky not working issue:

• 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 instance, the align-self value would equal the align-items value of the parent causing you to encounter the CSS position sticky not working error. Therefore, if the parent has align-items: stretch set or align-items: normal set, the sticky element’s height will stretch to occupy the entire available area. The sticky element would be unable to scroll within the parent due to this.

If the Sticky Element Has align-self: stretch Set:

In this scenario, there would be no scrollable space around the sticky element because it would stretch to the parent’s height.

Here, we conclude our guide on how to fix the CSS position sticky not working error. We hope you were able to get rid of the error and continue with your code thanks to our guide. CSS position sticky not working error is just one of the many common challenges of software project outsourcing.

Emre’s love for animals made him a veterinarian, and his passion for technology made him an editor. Making new discoveries in the field of editorial and journalism, Emre enjoys conveying information to a wide audience, which has always been a dream for him.

Related Posts

Xiaomi SU7 EV breaks cover in China

You need to be “old fashioned” to fix the FF7 Rebirth platinum trophy bug

Unveiling Google’s accidental announcement: When is RCS coming to Apple?

Apple is working on a system to charge new iPhones without unboxing

Leave a reply cancel reply.

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Xiaomi expands beyond cars: Meet Xiaomi Life, your SU7 companion

California state senator wants id checks before posting online, you can now sign up for amazon one palm payment service by phone, valorant fans can now use agent-themed avatars on discord, like, share… investigate facebook’s netflix connection questioned, microsoft takes action to prevent abuse of ai chatbots, © 2021 techbriefly is a linkmedya brand..

• | Network Sites |
• Digital Report
• LeaderGamer