{"id":282104,"date":"2019-02-04T08:20:38","date_gmt":"2019-02-04T15:20:38","guid":{"rendered":"http:\/\/css-tricks.com\/?p=282104"},"modified":"2019-02-04T08:20:38","modified_gmt":"2019-02-04T15:20:38","slug":"more-like-position-tricky","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/more-like-position-tricky\/","title":{"rendered":"More Like position: tricky;"},"content":{"rendered":"

I rather like position: sticky;<\/code>. It has practical use cases. I think of things like keeping a table of contents in a sidebar of a long article, but as a fairly simple implementation and without risk of overlapping things in awkward ways. But Elad Shechter is right here: it’s not used that much — at least partially — and probably because it’s a bit weird to understand.<\/p>\n

I like how Elad explains it with a “Sticky Item” and a “Sticky Container.” The container needs to be large enough that scrolling is relevant and for the stickiness to do anything at all.<\/p>\n

<\/p>\n

There are other gotchas, too. I feel like every time I try position: sticky;<\/code> in a real context, I have about a 30% chance of it working. There always seems to be some parent\/child relationship thing that I can’t quite work out to prevent overlaps. Or, there is some parent element with overflow: hidden;<\/code>, which, for reasons unbeknownst to me, breaks<\/a> this.<\/p>\n","protected":false},"excerpt":{"rendered":"

I rather like position: sticky;. It has practical use cases. I think of things like keeping a table of contents in a sidebar of a long article, but as a fairly simple implementation and without risk of overlapping things in awkward ways. But Elad Shechter is right here: it’s not used that much — at […]<\/p>\n","protected":false},"author":3,"featured_media":282171,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1300],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/elad-shechter-sticky-monster-1.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":334042,"url":"https:\/\/css-tricks.com\/how-to-create-a-shrinking-header-on-scroll-without-javascript\/","url_meta":{"origin":282104,"position":0},"title":"How to Create a Shrinking Header on Scroll Without JavaScript","date":"February 16, 2021","format":false,"excerpt":"Imagine a header of a website that is nice and thick, with plenty of padding on top and bottom of the content. As you scroll down, it shrinks up on itself, reducing some of that padding, making more screen real estate for other content. Normally you would have to use\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/shrinking-sticky-header-1.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":268289,"url":"https:\/\/css-tricks.com\/sticky-as-a-local-fixed\/","url_meta":{"origin":282104,"position":1},"title":"Sticky as a Local Fixed?","date":"March 26, 2018","format":false,"excerpt":"You know how position: relative creates a new context for absolute positioning within an element? Well, position: sticky is a locally scoped version of position: fixed. Let's take a look at how that works using a modal with a sticky close button as an example.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/modal-scroll.gif?fit=800%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":292192,"url":"https:\/\/css-tricks.com\/position-sticky-and-table-headers\/","url_meta":{"origin":282104,"position":2},"title":"Position Sticky and Table Headers","date":"July 12, 2019","format":false,"excerpt":"You can't position: sticky; a . Nor a . But you can sticky a , which means you can make sticky headers inside a regular ol' . This is tricky stuff, because if you didn't know this weird quirk, it would be hard to blame you. It makes way more\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/table-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":283534,"url":"https:\/\/css-tricks.com\/dealing-with-overflow-and-position-sticky\/","url_meta":{"origin":282104,"position":3},"title":"Dealing with overflow and position: sticky;","date":"February 25, 2019","format":false,"excerpt":"Any overflow value other than visible and no height is the enemy of child elements with position: sticky;. It's like that element is ready to stick when the parent scrolls, but it never does because the height is unconstrained. Adding a fixed height can solve the issue, but that's not\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/sticky-calendar.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":255843,"url":"https:\/\/css-tricks.com\/stickybits-alternative-position-sticky-polyfills\/","url_meta":{"origin":282104,"position":4},"title":"Stickybits: an alternative to `position: sticky` polyfills","date":"June 25, 2017","format":false,"excerpt":"Stickybits is a small JavaScript utility plugin. It's goal is not to get in the way. It does one thing well: help with sticky elements. It is not dependent on other JavaScript Plugins, can be imported via npm, and approaches sticky elements in a very utility-oriented way. Solving the sticky\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":357053,"url":"https:\/\/css-tricks.com\/a-clever-sticky-footer-technique\/","url_meta":{"origin":282104,"position":5},"title":"A Clever Sticky Footer Technique","date":"November 16, 2021","format":false,"excerpt":"Upon hearing \"sticky footer\" these days, I would think most people imagine a position: sticky situation where a footer element appears fixed on the screen while in the scrolling context of some parent element. That's not quite what I'm talking about here. \"Sticky footers\" were a UI concept before position:\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/sticky-footer.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/elad-shechter-sticky-monster-1.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/282104"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=282104"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/282104\/revisions"}],"predecessor-version":[{"id":282234,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/282104\/revisions\/282234"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/282171"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=282104"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=282104"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=282104"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}