Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Position

Positioning utilities give you the ability to change the position property of an element.

last modified: 05/05/2023 15:50:04

Position relative

rs-pos-rel add position relative to element with z-index="10" .

rs-pos-rel-so is for small-only.

Position absolute

Parent container must be relative (like the columns of gridding by default). If it's not yet the case, you could use rs-pos-rel class.
Then you can use any rs-pos-... on the element you wish to apply an absolute position.

Force static position

To force static positioning for small only: rs-pos-stat-so
To force static positioning for medium only: rs-pos-stat-mo

rs-pos-tl

rs-pos-bl

rs-pos-m

rs-pos-mr

rs-pos-tr

rs-pos-br

rs-pos-tc

rs-pos-mc

rs-pos-bc

rs-pos-tr

Position fixed

To position on top of screen: rs-pos-fixed rs-pos-t
To position on bottom of screen: rs-pos-fixed rs-pos-b

Position fixed on scroll

Add id="jsrs-stickyContainer" on the container where sticky sticks...

Add data-sticky-container="#jsrs-stickyContainer" to content that needs to stick on scroll. Pay attention to use the same value as for the ID.

Use data-sticky-container-breakpoint="medium" if you need sticky things only on medium-up.

I'm sticky !

Transform Y-50%

Add rs-transform-translateY-50 to make an element go up 50% of itself.