Employ the Overlap stack to layer sections of content on top of one another to create unique layouts on your pages.
In order to best showcase what the Overlap stack can do we’ve built a separate example page. Check out the example page to see how you can make use of the Overlap stack in your projects.
When enabled you'll be given additional options throughout the Overlap stack's settings that allow you to customize the styling for visitors who have Dark Mode enabled in their computer's OS or browser.
Choose which type of inner area you’d like to have in the Overlap stack. You can choose from a Fixed-Width or Fluid container.
When Fixed-Width is chosen you’re given the opportunity to specify what you wish the maximum width of the Overlap stack’s inner content area to be.
You are able to choose how Overlap handles the top and bottom distance adjustments. When an element is moved upwards with Overlap it leaves a space below that element that is equal to the amount it was moved upward.
You can choose to use the Unified method, where the stack applies a negative margin to the bottom of the element that is equal to the distance you moved it upwards. This eliminates the bottom gap. Or you can opt to set different values for the top and bottom distances. This is more advanced. Most users will only need and use the Unified option.
Set the distance that the Overlap stack will move upwards, overlapping the content on the page above it. You can set a different distance for each of the three breakpoints.
Allows you to set the distance that the Overlap stack will move upwards, was well as setting a different distance for below the Overlap stack. It too can be adjusted at each of the three breakpoints. The non-unified setting is less likely to be used in most layouts.
Allows you to choose to have the Overlap stack overlap its contents to the left- or right-hand side. If you're only looking to overlap in the vertical direction you can set this setting to Off.
Mobile, Tablet & Desktop
These are the overlap values for the horizontal distance. You can set a different overlap distance at each of the three responsive breakpoints.
Set the background color for the inner content area of the Overlap stack. You can set a different background color for each of the 3 breakpoints.
You are able to round the corners of the inner content area, setting different border radii at each of the breakpoints.
Enable to add a drop shadow to the inner content area of the Overlap stack. You’re also able to have the drop shadow be disabled at the Mobile breakpoint.
Set the distance you wish for the shadow to go in the vertical direction. You are able to set a different distance for this offset at each of the breakpoints. You can use either positive or negative numbers for the offset values.
Set the distance you wish for the shadow to go in the horizontal direction. You are able to set a different distance for this offset at each of the breakpoints. You can use either positive or negative numbers for the offset values.
Use this setting to adjust the size of the drop shadow at each of the three breakpoints.
You are able to adjust the color of your drop shadow to match your site’s styling. You can also use the opacity slider to adjust the shadow’s density.
Set the width of the inner content area’s border for each of the three breakpoints.
Choose what color you wish your border to be using a color picker to help match it to the style of the rest of your site.
Choose a custom Z-Index value for your overlapped content. This is for more advanced layering of content.
For 99% of the time you'll likely use the Unified settings option in the Overlap stack. This ensures that a negative margin is applied to the bottom of the Overlap stack that matches the distance you're moving the stack upwards. This maintains an expected spacing on your page. You can set your own bottom margin however by using the non-unified settings.