# Positioning a sticky element in a Webflow grid Tutorial3 minPublished on Mar 20, 2023Updated on ![Screenshot of a sticky interface on LinkedIn.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671181ebee2586c17a1b82ea_64760069e93084646c9ef1f1_622b89c19c6fbe2b8dccfd15_Open-Graph-webflow-sticky.png)Table of contents [ Copied](#)[ ](#)[ ](#)[ ](#) - [H2 Example](#) Use AI to summarize this article[ ChatGPT](#)[ Claude](#)[ Grok](#)[ Perplexity](#)[ Google AI](#)Key pointsWebflow offers complete freedom in styling and positioning elements. There are various positioning options available in Webflow. From static, relative, absolute, to sticky positions, you have plenty to work with in your project. An element in a sticky position scrolls alongside the page based on its parent element's relative position. Defining a sticky position for an element in Webflow is quite intuitive thanks to the “Style” tab. However, positioning a sticky column within a grid can be more complex. In today's Webflow tutorial, we will show you **how to position a sticky element within a Webflow grid**. Let’s jump straight into your Webflow project. P.S.: In our example, we used the [“Client-First” Webflow development methodology](https://finsweet.com/client-first/) to maintain a clean structure. ## 1. Overflow of Your Webflow Section We will start with the following base setup in Webflow for our example: ![overflow visible section webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671181edee2586c17a1b83e2_64760069e93084646c9eefdb_622b29252ae595f45373cb6a_section-overflow-visible-webflow.png) We have our section and our grid with 3 columns. The goal is to make the elements in the first and last columns sticky. First, we will focus on our main section. There is one crucial aspect to check in its styling: it is absolutely essential that the **overflow of the section is set to visible** (by default). Otherwise, as you scroll, your elements won't budge. ## 2. Aligning Elements in the Webflow Grid Now that we have addressed the section, we can turn our attention to the properties of your grid. Regarding the grid, there is also an important point to observe. In the “align” section, **make sure not to select the alignment: “Align item: Stretch”**. It is preferable to align your elements to the start. ![Grid Align item start Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671181edee2586c17a1b83d7_64760069e93084646c9eefde_622b293982456c3ef9715228_Align-start-grid-webflow.png) ## 3. Setting the Sticky Position for Your Elements Once you have successfully completed the steps above, all that's left is to set your elements to be sticky. This step works exactly the same as if you were making an element sticky in any other display aside from a grid. ### 3.1 Set the Relative Position for Your Grid Before making your elements sticky, you need to ensure that the parent grid is set to **relative position**. ![Grid position relative Webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671181edee2586c17a1b83dd_64760069e93084646c9eefdd_622b294f337dc656648b7777_position-relative-grid-webflow.png) ### 3.2 Apply the Sticky Position to Your Elements with a Value Now, returning to our example, we will select our element in the first column and set it to **sticky position**. However, if that was all we did, nothing would happen as you scroll. It is necessary to **define a value** from which the element will start to scroll. In our example, we select a value of 2rem from the top. Discover why [to prioritize REMs over Pixels](/blog/rem-pixel-what-difference-site). ![column 1 sticky position grid webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671181edee2586c17a1b83d3_64760069e93084646c9eefdc_622b2961953012bb0b790d0a_sticky-position-columns-grid-1-webflow.png) We perform exactly the same steps for our element in the last column. ![column 2 sticky position grid webflow](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/671181edee2586c17a1b83e8_64760069e93084646c9eefdf_622b2977849a149d1a2f8d84_sticky-position-columns-grid-3-webflow.png) That's it! Your elements now scroll with the page in your grid. To see the result live, you can check out our **free Webflow template**: [LinkedIn Embed Free](https://webflow.com/made-in-webflow/website/Linkedin-Feed-Free-to-clone-Webflow-template). There you go! You can now have fun and **position your elements in sticky mode within your grids on Webflow**. For even more customization in your projects, feel free to read our article on [element positions in Webflow](/blog/webflow-elements-positions). You can also reach out to our [no-code agency](/enterprise-websites) for your website creation projects. [ ](#)![Thibaut Legrand](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/678a47ec4cabceb0d6aa7c2e_thibaut-website%20(1).webp)Thibaut LegrandCofounder at Vydera & Technical Solutions Architect[ ](/team/thibaut-legrand)[ ](https://www.linkedin.com/in/thibaut-legrand-digidop/)[ ](https://twitter.com/lgd_thibaut)+1200 readers ## Stay ahead of the curve! Subscribe now for expert insights. [Subscribe ](https://digidop.substack.com/subscribe)![Preview Digidop Newsletter](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/671231c436687e9d40d995e9_newsletter-digidop.webp)[Preview Newsletter ](https://digidop.substack.com/) ## Suggested articles ![Collage of homepages from B2B SaaS agencies including Digidop, Vydera, FlowNinja, OFF+BRAND, Yuri & Neil, MetaLab, Shakuro and Ramotion](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6ab922fa556f97c19ea7db9a_Best%20B2B%20SaaS%20Agencies%20in%202026_EN.webp)DocumentationAll blog post ### Top 20 Web & Digital Agencies for B2B SaaS in 2026 [Top 20 Web & Digital Agencies for B2B SaaS in 2026](/blog/best-b2b-saas-agencies)Top 20 Web & Digital Agencies for B2B SaaS in 2026![Webflow Source interface showing AI agents, website editing, and role-based Views in a unified workspace.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9fa9f8608ffcc774c47eb7_source%20(1).webp)NewsDevelopmentAll blog post ### Webflow launches Source. Our take on this shift. [Webflow launches Source. Our take on this shift.](/blog/webflow-launches-source)Webflow launches Source. Our take on this shift.![Citation rate by AI platform: ChatGPT 100%, Perplexity 100%, Gemini 67%, and Claude 0%.](https://cdn.prod.website-files.com/67053868fc01e494462e71c9/6a9044c13914f1d6ac3e9161_citation.jpg)DocumentationAIAll blog post ### Make Your Website Visible in ChatGPT, Perplexity, and AI Answers [Make Your Website Visible in ChatGPT, Perplexity, and AI Answers](/blog/make-your-website-visible-in-chatgpt-perplexity-and-ai-answers)Make Your Website Visible in ChatGPT, Perplexity, and AI Answers[See all articles ](/blog)Every great website   starts with a conversation[Talk to an expert ](/contact)[Book a call ](/calendly)![Abstract composition of black and gold metallic ribbons with elegant light reflections and smooth gradients. A premium background conveying luxury, modernity, and innovation.](https://cdn.prod.website-files.com/6705382c85d21c496de94fa5/6a69a346549deffabdf98afa_shape-cta-footer.webp)