{"id":6567,"date":"2021-10-17T14:15:48","date_gmt":"2021-10-17T14:15:48","guid":{"rendered":"https:\/\/www.terluinwebdesign.nl\/en\/?p=6567"},"modified":"2025-07-18T14:53:54","modified_gmt":"2025-07-18T14:53:54","slug":"position-sticky-not-working-try-overflow-clip-not-overflow-hidden","status":"publish","type":"post","link":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/","title":{"rendered":"CSS &#8216;position: sticky&#8217; not working? Try &#8216;overflow: clip&#8217;, not &#8216;overflow: hidden&#8217;"},"content":{"rendered":"<pre><prevent-autop><div class=\"row all d__content-in-narrow-container t__content-in-container m__content-in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"4508.4375\" data-cache-vw-t=\"617\" data-cache-h-t=\"4261.8046875\" data-cache-vw-m=\"462\" data-cache-h-m=\"9292.9921875\"><div class=\"col all\"><p>If you've ever tried sticky positioning, then you have probably wondered why CSS <strong class=\"code css-code\">position: sticky<\/strong> is not working for your web design. It's because an ancestor element has one of the following values for the <span class=\"code css-code\">overflow<\/span> property: <span class=\"code css-code\">hidden<\/span>, <span class=\"code css-code\">scroll<\/span>, or <span class=\"code css-code\">auto<\/span>.<\/p><p>That's disappointing, because you really needed that <strong class=\"code css-code\">overflow-x: hidden<\/strong> on the <code>&lt;body&gt;<\/code>-tag or on any other wrapper, to prevent horizontal scrolling due to overflowing content..<\/p><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><h2>How to make position: sticky work with an ancestor's or parent's overflow: hidden?<\/h2><p>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.<\/p><p>There is, however, a rather new value for the <span class=\"code css-code\">overflow<\/span>-property - it's called: <strong class=\"code css-code\">clip<\/strong>.<\/p><p>This new value completely solves this problem. Unfortunately, there is a <em>but<\/em> to this one.<\/p><tw-shortcode-wrapper data-id=\"12\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><h2>Browser support for CSS declaration&nbsp;<em>overflow: clip<\/em><\/h2><p>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.<\/p><p>Who are the evildoers, you ask me?<\/p><ul><li>Safari on iOS (13.83%)<\/li><li>Safari (4.07%)<\/li><li>Google Chrome versions 4 - 89 (3.1%)<\/li><li>Samsung Internet versions 4 - 14.0 (1.14%)<\/li><li>Internet Explorer (0.93%)<\/li><li>Opera versions 10 - 75 (0.47%)<\/li><li>Android Browser versions 2.1 - 4.4.4 (0.28%)<\/li><li>Opera Mobile (0.01%)<\/li><\/ul><p class=\"semi-small\">Source:&nbsp;<a href=\"https:\/\/caniuse.com\/mdn-css_properties_overflow_clip\" target=\"_blank\" rel=\"noopener\">https:\/\/caniuse.com\/mdn-css_properties_overflow_clip<\/a><\/p><p>There is, however, another rather new CSS property: <span class=\"code css-code\">contain<\/span>. If you use <span class=\"code css-code\">contain: paint<\/span>, then all the descendants that overflow the container, will get clipped to the border-box.<\/p><p>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 <span class=\"code css-code\">overflow<\/span>.<\/p><p>Also, <span class=\"code css-code\">contain<\/span> 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 <span class=\"code css-code\">overflow-x<\/span> and <span class=\"code css-code\">overflow-y<\/span> with value <span class=\"code css-code\">clip<\/span>.<\/p><p>If you are interested in improving the performance of your web design, consider reading a post about <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/calculating-contain-intrinsic-size-for-content-visibility\/\" target=\"_blank\" rel=\"noopener\">lazy-rendering using content-visibility: auto and contain-intrinsic-size<\/a>.<\/p><h2>Overflow: clip vs overflow: hidden<\/h2><p>The <span class=\"code css-code\">clip<\/span> value does the same as the <span class=\"code css-code\">hidden<\/span> value, except for that it completely disables any form of scrolling. The <span class=\"code css-code\">hidden<\/span> value only disables scrolling for the user, while keeping the option for programmatic scrolling, thus making it a scroll container.<\/p><p>Since it is now a scroll container, it needs a specified height in order for <span class=\"code css-code\">position: sticky<\/span> to work. You did not specify a height to the scroll container, and why would you?<\/p><p>Mozilla Firefox versions 80 and lower have a non-standard name for value&nbsp;<span class=\"code css-code\">clip<\/span>, which perfectly describes what it actually does: <span class=\"code css-code\">-moz-hidden-unscrollable<\/span>.<\/p><p>It hides the overflowing content, but does not turn the element into a scroll container.<\/p><p>So, the <span class=\"code css-code\">clip<\/span> 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.<\/p><tw-shortcode-wrapper data-id=\"13\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><h2>What am I supposed to do now?<\/h2><p>If you really want <span class=\"code css-code\">position: sticky<\/span> to work on all modern browsers, then you should consider not using <span class=\"code css-code\">overflow: hidden<\/span> on the <code>&lt;body&gt;<\/code> or any wrapper surrounding the main content, but rather put a wrapper around elements that will overflow the viewport.<\/p><p>Then, those wrappers should use <span class=\"code css-code\">overflow: hidden<\/span>. If those wrappers contain elements that use <span class=\"code css-code\">position: sticky<\/span>, then I feel sorry for you; I guess it's time to wait for support.<\/p><h3>Use overflow: hidden as a fallback for overflow: clip<\/h3><p>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 <span class=\"code css-code\">hidden<\/span> as a fallback for browsers that do not support <span class=\"code css-code\">overflow: clip<\/span>.<\/p><p>Elements with <span class=\"code css-code\">position: sticky<\/span> will, in this case, not work for browsers that do not support <span class=\"code css-code\">overflow: clip<\/span>. If this is something that you prefer over manually wrapping all elements that overflow the viewport, then that is completely understandable.<\/p><p>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).<\/p><p>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 <span class=\"code css-code\">clip<\/span> for CSS property <span class=\"code css-code\">overflow<\/span>:&nbsp;86.92%. That's more like it!<\/p><p class=\"semi-small\">Source:&nbsp;<a href=\"https:\/\/gs.statcounter.com\/platform-market-share\/desktop-mobile-tablet\" target=\"_blank\" rel=\"noopener\">https:\/\/gs.statcounter.com\/platform-market-share\/desktop-mobile-tablet<\/a><\/p><p>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.<\/p><h3>Provide a prefixed version of sticky for older Safari browsers<\/h3><p>It is necessary to provide a prefixed version of <span class=\"code css-code\">position: sticky<\/span> for Safari browser versions 6.1 - 12.1 (0.2%) and Safari for iOS versions 6 - 12.5 (1.35%): <span class=\"code css-code\">-webkit-sticky<\/span>.<\/p><tw-pre><code class=\"css-code\">.sticky {\r\n  <strong>position: -webkit-sticky;<\/strong>\r\n  position: sticky;\r\n}<\/code><\/tw-pre><tw-shortcode-wrapper data-id=\"14\" data-esi=\"0\">\n<aside class=\"mar-top-s mar-bottom-m\">\n\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8806116570640926\"\n     crossorigin=\"anonymous\"><\/script>\n<ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-layout=\"in-article\"\n     data-ad-format=\"fluid\"\n     data-ad-client=\"ca-pub-8806116570640926\"\n     data-ad-slot=\"7727714412\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n<\/aside><\/tw-shortcode-wrapper><h2>CSS position: sticky not working; is it a big deal?<\/h2><p>If CSS <span class=\"code css-code\">position: sticky<\/span>&nbsp;doesn't work on some browsers, does it hurt your web design's <abbr title=\"User Experience\">UX<\/abbr>?<\/p><p>Sticky elements are handy, sure, but is the element still usable on browsers that do not support <span class=\"code css-code\">position: sticky<\/span> at all? It is often still usable, but if you use elements with <span class=\"code css-code\">position: absolute<\/span> within them, then it's parent's <span class=\"code css-code\">position<\/span> is no longer <span class=\"code css-code\">sticky<\/span>, it's <span class=\"code css-code\">static<\/span>.<\/p><p>This is far fetched, since you probably don't care about browsers that don't even support <span class=\"code css-code\">position: sticky<\/span>; browsers like Internet Explorer and very outdated modern browsers.<\/p><p>If you do care about those older browsers, then it's a good practice to provide <span class=\"code css-code\">position: relative<\/span> as a fallback and apply properties&nbsp;<span class=\"code css-code\">top<\/span>, <span class=\"code css-code\">right<\/span>, <span class=\"code css-code\">bottom<\/span>, and <span class=\"code css-code\">left<\/span> on the sticky element <strong>only<\/strong> if the browser supports either <span class=\"code css-code\">sticky<\/span> or <span class=\"code css-code\">-webkit-sticky<\/span> for&nbsp;<span class=\"code css-code\">position<\/span>.<\/p><p>Otherwise, if the element is relatively positioned instead of sticky, it will move because of the CSS properties&nbsp;<span class=\"code css-code\">top<\/span>, <span class=\"code css-code\">right<\/span>, <span class=\"code css-code\">bottom<\/span>, and <span class=\"code css-code\">left<\/span>. This is an example:<\/p><tw-pre><code class=\"css-code\">.sticky {\r\n  position: relative;\r\n  position: -webkit-sticky;\r\n  position: sticky;\r\n}\r\n@supports (position: sticky) or (position: -webkit-sticky) {\r\n  .some-sticky-element {\r\n    bottom: 30px;\r\n  }\r\n}<\/code><\/tw-pre><p>Now, for browsers that do support <span class=\"code css-code\">position: sticky<\/span>, but do not support <span class=\"code css-code\">overflow: clip<\/span>, the sticky element will just not be sticky. So the web page should work just fine.<\/p><hr><p><strong>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 <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/\">unique CSS solutions<\/a> every once in a while? Then do stick around!<\/strong><\/p><p><strong>Random fact: RSS is (coming) back to Google Chrome, so follow us if you'd like!<\/strong><\/p><\/div><\/div><aside class=\"row all t__content-in-container m__content-in-container d__in-container v-center bg-yellow__light m__vertical color-scheme-light__dark bg-yellow__dark t__vertical t__h-center t__c m__c\" data-cache-vw-d=\"1512\" data-cache-h-d=\"318.53125\" data-cache-vw-t=\"617\" data-cache-h-t=\"836.5546875\" data-cache-vw-m=\"462\" data-cache-h-m=\"870.9609375\"><div class=\"col all w-1\/d\/3 w-10\/t\/13\"><h2 class=\"t__h1 wrap-balance anim-fade-in\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/h2><a class=\"button bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><div class=\"col all\"><div class=\"row all m__vertical t__vertical\"><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/website-builder-ai-bizbuilder-homepage.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3020\" height=\"1645\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/website-builder-ai-bizbuilder-homepage-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"193.453125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"272.796875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"219.4921875\" data-img-of-m=\"fill\"><\/div><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/bizbuilder-dienst-pagina-desktop.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3840\" height=\"2160\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/bizbuilder-dienst-pagina-desktop-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"200.40625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"282.609375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"227.390625\" data-img-of-m=\"fill\"><\/div><\/div><\/div><\/aside><\/prevent-autop><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;ve ever tried sticky positioning, then you have probably wondered why CSS position: sticky is not working for your web design. It&#8217;s because an ancestor element has one of the following values for the overflow property: hidden, scroll, or auto.That&#8217;s disappointing, because you really needed that overflow-x: hidden on the &lt;body&gt;-tag or on any <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/\" class=\"read-more-link block\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":6581,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,56],"tags":[],"class_list":["post-6567","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS &#039;position: sticky&#039; not working? Try &#039;overflow: clip&#039;, not &#039;overflow: hidden&#039;<\/title>\n<meta name=\"description\" content=\"This post explains the difference between &#039;overflow: clip&#039; and &#039;overflow: hidden&#039;, and how this can solve problems with &#039;position: sticky&#039;.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS &#039;position: sticky&#039; not working? Try &#039;overflow: clip&#039;, not &#039;overflow: hidden&#039;\" \/>\n<meta property=\"og:description\" content=\"This post explains the difference between &#039;overflow: clip&#039; and &#039;overflow: hidden&#039;, and how this can solve problems with &#039;position: sticky&#039;.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/\" \/>\n<meta property=\"og:site_name\" content=\"Terluin Webdesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TerluinWebdesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-17T14:15:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T14:53:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-position-sticky-not-working-try-overflow-clip-not-overflow-hidden.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"676\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thijs Terluin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:site\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thijs Terluin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/\"},\"author\":{\"name\":\"Thijs Terluin\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\"},\"headline\":\"CSS &#8216;position: sticky&#8217; not working? Try &#8216;overflow: clip&#8217;, not &#8216;overflow: hidden&#8217;\",\"datePublished\":\"2021-10-17T14:15:48+00:00\",\"dateModified\":\"2025-07-18T14:53:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-position-sticky-not-working-try-overflow-clip-not-overflow-hidden.jpg\",\"articleSection\":[\"Blog\",\"CSS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/\",\"name\":\"CSS 'position: sticky' not working? Try 'overflow: clip', not 'overflow: hidden'\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-position-sticky-not-working-try-overflow-clip-not-overflow-hidden.jpg\",\"datePublished\":\"2021-10-17T14:15:48+00:00\",\"dateModified\":\"2025-07-18T14:53:54+00:00\",\"description\":\"This post explains the difference between 'overflow: clip' and 'overflow: hidden', and how this can solve problems with 'position: sticky'.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/#primaryimage\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-position-sticky-not-working-try-overflow-clip-not-overflow-hidden.jpg\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-position-sticky-not-working-try-overflow-clip-not-overflow-hidden.jpg\",\"width\":1200,\"height\":676,\"caption\":\"CSS 'position: sticky' not working? Try 'overflow: clip', not 'overflow: hidden'\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"name\":\"Terluin Webdesign\",\"description\":\"Let your website work for you\",\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\",\"name\":\"Terluin Webdesign\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"width\":294,\"height\":674,\"caption\":\"Terluin Webdesign\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/TerluinWebdesign\/\",\"https:\/\/x.com\/terluinwdesign\",\"https:\/\/www.instagram.com\/terluinwebdesign\/\",\"https:\/\/www.linkedin.com\/company\/terluin-webdesig\/\",\"https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\",\"name\":\"Thijs Terluin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"caption\":\"Thijs Terluin\"},\"description\":\"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thijs-terluin\/\"],\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS 'position: sticky' not working? Try 'overflow: clip', not 'overflow: hidden'","description":"This post explains the difference between 'overflow: clip' and 'overflow: hidden', and how this can solve problems with 'position: sticky'.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/","og_locale":"en_US","og_type":"article","og_title":"CSS 'position: sticky' not working? Try 'overflow: clip', not 'overflow: hidden'","og_description":"This post explains the difference between 'overflow: clip' and 'overflow: hidden', and how this can solve problems with 'position: sticky'.","og_url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/","og_site_name":"Terluin Webdesign","article_publisher":"https:\/\/www.facebook.com\/TerluinWebdesign\/","article_published_time":"2021-10-17T14:15:48+00:00","article_modified_time":"2025-07-18T14:53:54+00:00","og_image":[{"width":1200,"height":676,"url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-position-sticky-not-working-try-overflow-clip-not-overflow-hidden.jpg","type":"image\/jpeg"}],"author":"Thijs Terluin","twitter_card":"summary_large_image","twitter_creator":"@terluinwdesign","twitter_site":"@terluinwdesign","twitter_misc":{"Written by":"Thijs Terluin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/#article","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/"},"author":{"name":"Thijs Terluin","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd"},"headline":"CSS &#8216;position: sticky&#8217; not working? Try &#8216;overflow: clip&#8217;, not &#8216;overflow: hidden&#8217;","datePublished":"2021-10-17T14:15:48+00:00","dateModified":"2025-07-18T14:53:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/"},"wordCount":11,"publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-position-sticky-not-working-try-overflow-clip-not-overflow-hidden.jpg","articleSection":["Blog","CSS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/","name":"CSS 'position: sticky' not working? Try 'overflow: clip', not 'overflow: hidden'","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/#primaryimage"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-position-sticky-not-working-try-overflow-clip-not-overflow-hidden.jpg","datePublished":"2021-10-17T14:15:48+00:00","dateModified":"2025-07-18T14:53:54+00:00","description":"This post explains the difference between 'overflow: clip' and 'overflow: hidden', and how this can solve problems with 'position: sticky'.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/position-sticky-not-working-try-overflow-clip-not-overflow-hidden\/#primaryimage","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-position-sticky-not-working-try-overflow-clip-not-overflow-hidden.jpg","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-position-sticky-not-working-try-overflow-clip-not-overflow-hidden.jpg","width":1200,"height":676,"caption":"CSS 'position: sticky' not working? Try 'overflow: clip', not 'overflow: hidden'"},{"@type":"WebSite","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website","url":"https:\/\/www.terluinwebdesign.nl\/en\/","name":"Terluin Webdesign","description":"Let your website work for you","publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization","name":"Terluin Webdesign","url":"https:\/\/www.terluinwebdesign.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","width":294,"height":674,"caption":"Terluin Webdesign"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TerluinWebdesign\/","https:\/\/x.com\/terluinwdesign","https:\/\/www.instagram.com\/terluinwebdesign\/","https:\/\/www.linkedin.com\/company\/terluin-webdesig\/","https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ"]},{"@type":"Person","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd","name":"Thijs Terluin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","caption":"Thijs Terluin"},"description":"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.","sameAs":["https:\/\/www.linkedin.com\/in\/thijs-terluin\/"],"url":"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/comments?post=6567"}],"version-history":[{"count":1,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6567\/revisions"}],"predecessor-version":[{"id":9083,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6567\/revisions\/9083"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media\/6581"}],"wp:attachment":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media?parent=6567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/categories?post=6567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/tags?post=6567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}