Guide
- How-to
- Negative gap
Guide
- How-to
- Negative gap
Guide
- How-to
- Negative gap
How To Set Negative Gap in Framer
Unfortunately, in Framer, you can't set a negative gap on stacks to make elements overlap. Let me show you what to do if you still want overlapping elements.
Posted by
Nandi
Table of contents
While you might think you could use absolute positioning to force items on top of one another, there’s a major downside to this approach: it’s not responsive.
When you use absolute positioning, the elements don't adjust to changes in screen size or the removal of elements. If you take out a frame, the others don’t automatically rearrange, and you’d have to manually reposition everything.
While you might think you could use absolute positioning to force items on top of one another, there’s a major downside to this approach: it’s not responsive.
When you use absolute positioning, the elements don't adjust to changes in screen size or the removal of elements. If you take out a frame, the others don’t automatically rearrange, and you’d have to manually reposition everything.
While you might think you could use absolute positioning to force items on top of one another, there’s a major downside to this approach: it’s not responsive.
When you use absolute positioning, the elements don't adjust to changes in screen size or the removal of elements. If you take out a frame, the others don’t automatically rearrange, and you’d have to manually reposition everything.
Overlapping profile images with absolute positioning aren't responsive.
Overlapping profile images with absolute positioning aren't responsive.
Overlapping profile images with absolute positioning aren't responsive.
The good news is we can create a structure that allows us to have overlapping items within a stack while keeping them fully responsive.
The goal: A responsive overlap with relative positioning
So how do you achieve the perfect overlap while keeping everything responsive? The solution is simple: use relative positioning instead of absolute positioning.
Here’s how you can create that overlapping effect without writing a single line of code:
0. The basic setup:
Have all images you want to overlap in a stack with gap set to zero, width set to fit content, and overflow set to visible.
The good news is we can create a structure that allows us to have overlapping items within a stack while keeping them fully responsive.
The goal: A responsive overlap with relative positioning
So how do you achieve the perfect overlap while keeping everything responsive? The solution is simple: use relative positioning instead of absolute positioning.
Here’s how you can create that overlapping effect without writing a single line of code:
0. The basic setup:
Have all images you want to overlap in a stack with gap set to zero, width set to fit content, and overflow set to visible.
The good news is we can create a structure that allows us to have overlapping items within a stack while keeping them fully responsive.
The goal: A responsive overlap with relative positioning
So how do you achieve the perfect overlap while keeping everything responsive? The solution is simple: use relative positioning instead of absolute positioning.
Here’s how you can create that overlapping effect without writing a single line of code:
0. The basic setup:
Have all images you want to overlap in a stack with gap set to zero, width set to fit content, and overflow set to visible.
Setting image stack to relative.
Setting image stack to relative.
Setting image stack to relative.
1. Wrap each item in a frame:
Start by wrapping each image in a frame. For instance, if you're working with profile images, select an image in your stack. Then, press CMD + ENTER (on Mac) to wrap it in a frame. Then, set this wrapping container to overflow visible. Make sure to do this for each image in the stack.
2. Unpin the wrapped elements:
Before resizing the wrapping frame, make sure you unpin the wrapped image. This step is important because if the element is still pinned, it may try to resize when you adjust its parent (the wrapping frame).
3. Adjust the frame width:
Next, you need to adjust the width of the wrapping frame. Set its width to 1px. Don’t worry, you won’t see the 1px frame itself—it’s just a structural change to allow the overlap effect. You can then start tweaking the gap in the main wrapping stack that we initially set to zero gap, to change the overlap amount.
4. Test the responsiveness:
Now that you have the structure in place, try removing an element, you’ll notice that the overlap effect stays intact, and the layout remains responsive.
1. Wrap each item in a frame:
Start by wrapping each image in a frame. For instance, if you're working with profile images, select an image in your stack. Then, press CMD + ENTER (on Mac) to wrap it in a frame. Then, set this wrapping container to overflow visible. Make sure to do this for each image in the stack.
2. Unpin the wrapped elements:
Before resizing the wrapping frame, make sure you unpin the wrapped image. This step is important because if the element is still pinned, it may try to resize when you adjust its parent (the wrapping frame).
3. Adjust the frame width:
Next, you need to adjust the width of the wrapping frame. Set its width to 1px. Don’t worry, you won’t see the 1px frame itself—it’s just a structural change to allow the overlap effect. You can then start tweaking the gap in the main wrapping stack that we initially set to zero gap, to change the overlap amount.
4. Test the responsiveness:
Now that you have the structure in place, try removing an element, you’ll notice that the overlap effect stays intact, and the layout remains responsive.
1. Wrap each item in a frame:
Start by wrapping each image in a frame. For instance, if you're working with profile images, select an image in your stack. Then, press CMD + ENTER (on Mac) to wrap it in a frame. Then, set this wrapping container to overflow visible. Make sure to do this for each image in the stack.
2. Unpin the wrapped elements:
Before resizing the wrapping frame, make sure you unpin the wrapped image. This step is important because if the element is still pinned, it may try to resize when you adjust its parent (the wrapping frame).
3. Adjust the frame width:
Next, you need to adjust the width of the wrapping frame. Set its width to 1px. Don’t worry, you won’t see the 1px frame itself—it’s just a structural change to allow the overlap effect. You can then start tweaking the gap in the main wrapping stack that we initially set to zero gap, to change the overlap amount.
4. Test the responsiveness:
Now that you have the structure in place, try removing an element, you’ll notice that the overlap effect stays intact, and the layout remains responsive.
With this structure, we can keep all elements in relative positioning, so they stay nicely responsive.
With this structure, we can keep all elements in relative positioning, so they stay nicely responsive.
With this structure, we can keep all elements in relative positioning, so they stay nicely responsive.
Pro tip: Adding more visual appeal
If you want to make the overlap more dramatic or visually engaging, feel free to play around with additional effects like shadows, rotations, or scaling. These small tweaks can make your design stand out even more, giving it a dynamic feel.
You see, you can set negative gap, you just have to go the extra mile. ;)
Pro tip: Adding more visual appeal
If you want to make the overlap more dramatic or visually engaging, feel free to play around with additional effects like shadows, rotations, or scaling. These small tweaks can make your design stand out even more, giving it a dynamic feel.
You see, you can set negative gap, you just have to go the extra mile. ;)
Pro tip: Adding more visual appeal
If you want to make the overlap more dramatic or visually engaging, feel free to play around with additional effects like shadows, rotations, or scaling. These small tweaks can make your design stand out even more, giving it a dynamic feel.
You see, you can set negative gap, you just have to go the extra mile. ;)
