Position

Positioning

Use left-,right-,top-,bottom- like this:

<div class="left-" style="--left-: 10px"></div>

<div class="my-class right-"></div>

.my-class {
    --right-: right: 50px;
}

You can use the .absolute-children class to apply position relative to an element and all of its direct children will be absolutely positioned.

.absolute-children {
    position: relative;
}
.absolute-children > * {
    position: absolute;
}

media queries

Prefix md- or lg- for media query modifiers

The .left-, .right-, .top-, .bottom- classes rely on css custom properties and fallback value to allow it to work across media queries

<div class="left-"style="--left-: 10px; --md-left-: 20px --lg-left-: 30px"></div>

<div class="my-class right-"></div>

.my-class {
    --right-: right: 50px;
    --md-right-: right: 20px;
    --lg-right-: right: 30px;
}