Please don't forget to read Usage part of each element.
Overlap
Allows you to create an overlap from one section to a second one or the opposite. This direction of your overlap will change who's overlaped by the other element.
If 2 sections need an overlap, each section needs first to have the standard inside spacing (Read Spacings on sections documentation), meaning that each section should have a <div class="rs-fe3"> as first element and a <div class="rs-le2"> as last element.
Overlapping section
The first section that will be overlapped by the second should have rs-overlapped
class to add the according spacings to your section.
The second section (overlapping the first one) will have rs-overlapping
class that will set the correct negative margin to make it go over the first section.
You could use rs-pos-rel
class as a hack to force it. This class has z-index set to 10.
This section is overlapped by the next section
This section overlaps the previous section.
feugiat dictum magna vitae mattis. Lorem ipsum dolor sit amet
Reverse overlapping element
Add <div class="rs-reverse-overlapping"> around the element which will have an overlapping behaviour, it is important to create a specific div for this to avoid any margin or padding conflict.
On the section following the one with your overlapping element add this class <div class="rs-reverse-overlapped"> .
This section is totally normal.
This element will be the rs-reverse-overlapping.
This means that he will overlap the next section with 60 pixels.
feugiat dictum magna vitae mattis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Maecenas id arcu sapien. Fusce eu lorem hendrerit nunc sodales consectetur vel eget felis. Pellentesque consectetur molestie nulla ac ultricies. Phasellus facilisis justo et nisi consectetur lobortis. Aenean nisl est pellentesque vel fermentum id scelerisque sit amet
And here will come the rest of your content in another section.
feugiat dictum magna vitae mattis. Lorem ipsum dolor sit amet consectetur adipiscing elit. Maecenas id arcu sapien. Fusce eu lorem hendrerit nunc sodales consectetur vel eget felis. Pellentesque consectetur molestie nulla ac ultricies. Phasellus facilisis justo et nisi consectetur lobortis. Aenean nisl est pellentesque vel fermentum id scelerisque sit amet augue.Donec non diam ac nisl tincidunt eleifend. Aliquam erat volutpat. Cras et urna id nibh porta sagittis nec in mauris. Nullam imperdiet tempor tempor. Nam ipsum quam semper in vehicula ac volutpat quis orci. Donec sollicitudin adipiscing mauris ac cursus augue condimentum at. Morbi ac urna at lectus euismod porta
Element with overlapping child
Your first have to add <div class="rs-has-overlap"> around the element which will have an overlapping child to set the overflow to visible and the position to relative.
Then add rs-is-overlapping
class to your overlapping child element to set its position to absolute and to the top right corner with the default spacing.
You can easily adapt the spacing of your child element with the spacing classes.
If your content is flex, add rs-maxh
on rs-has-overlap
.
I'm overlapped by one of my children
Force direction
You can force placement to left or right with dedicated class: add rs-is-overlapping-left or rs-is-overlapping-right to rs-is-overlapping class. By default, it's right, but some components use this other side.
I'm overlapped by one of my children
Clickable element with overlapping child
In order to be able to click the whole box with an overlapping child, you have to add jsrs-clickable
to the element with rs-has-overlap
I'm overlapped by one of my children Click me