How to do this layout in Webflow guys? Overlapping section?
Hey Adrien,
There are a lot of approaches. I tend to aim for simplicity and minimum disruption to the surrounding layout- it makes responsiveness cleaner.
Here I’d design the first section normally but give leave the background transparent.
The second pastel-orange section would be where I’d put all of the offset settings as follows;
- position: relative
- top-margin: -200px
- top-padding: 200px
- z-index: -1
This puts it behind the section above it and the rest of the layout flows organically.
The negative top-margin creates the overlap, the corresponding top-padding ensures that the content of that section is not covered.
Note that using variables and calc, you can do some cool stuff with the changes Webflow has made in the last year. For example, you could define a variable of 200px named offset, and assign it as the top-padding.
Then for the top margin, you could use calc(-1 * var(--offset)) and you’d have a dynamic negative value of that offset var.
1 Like
Sounds complicated, thanks so much though! no simpler way?
It’s only 4 style settings 
… that’s the super-duper-simple way.
1 Like
It worked! Awesome!!! Thank you so much!
The things you’re asking are important basic concepts in web layout- have you done the tutorials in Webflow U? They’re excellent and you really need to understand how these principles work or you won’t be able to design anything.
For this one, look into;
- SVG elements
- Opacity setting
- Relative/absolute positioning
This will help with understanding that last concept;