How can I make all sections below the crimson hero section scroll on top of it in Webflow?

Published on
September 22, 2023

To make sections below the crimson hero section scroll on top of it in Webflow, you can use the position property and z-index value to control the stacking order of elements. Here's a step-by-step guide on how to achieve this:

  1. Select the crimson hero section in the Webflow Designer.
  2. In the Styles panel, navigate to the Position section.
  3. Set the position property to "Relative". This allows you to control how the section interacts with other elements.
  4. Next, increase the z-index value. The higher the value, the more likely the element will appear on top of other elements with lower z-index values. Set a value that is higher than the sections below.
  5. Save and publish your site to apply the changes.

With this setup, the crimson hero section will now appear below the sections below it, allowing them to scroll on top of it.

Note: Ensure that the sections below the crimson hero section have a background color or some content that is tall enough to enable scrolling and showcase the effect.

By following these steps, you should be able to make all sections below the crimson hero section scroll on top of it in Webflow. Have fun designing!

Additional Questions:

  1. How do I change the z-index value in Webflow?
  2. Can I make a specific element always stay on top of other elements while scrolling?
  3. Is it possible to make only certain sections scroll on top of the crimson hero section in Webflow?