Position

This provides styles for setting the position style for elements.

Each position base class has a class to go with each of the media query viewport sizes. For example:

absolute-3xs
absolute-2xs
absolute-xs
absolute-sm
absolute-md
absolute-lg
absolute-xl
absolute-1xl
absolute-3xl
absolute-4xl
absolute-5xl

How to import into your CSS

Import this into your CSS with:

@import 'cacao-css/dist/position/position.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/position/3xs/position.css';
@import 'cacao-css/dist/position/2xs/position.css';
@import 'cacao-css/dist/position/xs/position.css';
@import 'cacao-css/dist/position/sm/position.css';
@import 'cacao-css/dist/position/md/position.css';
@import 'cacao-css/dist/position/lg/position.css';
@import 'cacao-css/dist/position/xl/position.css';
@import 'cacao-css/dist/position/2xl/position.css';
@import 'cacao-css/dist/position/3xl/position.css';
@import 'cacao-css/dist/position/4xl/position.css';
@import 'cacao-css/dist/position/5xl/position.css';

See Import Cacao CSS for more information.

Source CSS

Default styles

position/position.css

/* =========================================================================== *\
   Positioning utilities
\* =========================================================================== */

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.relative {
    position: relative;
}

.static {
    position: static;
}

.sticky {
    position: sticky;
}

3xs styles

position/3xs/position.css

/* =========================================================================== *\
   Positioning utilities
\* =========================================================================== */

@media (--m-3xs) {
    .absolute-3xs {
        position: absolute;
    }

    .fixed-3xs {
        position: fixed;
    }

    .relative-3xs {
        position: relative;
    }

    .static-3xs {
        position: static;
    }

    .sticky-3xs {
        position: sticky;
    }
}

2xs styles

position/2xs/position.css

/* =========================================================================== *\
   Positioning utilities
\* =========================================================================== */

@media (--m-2xs) {
    .absolute-2xs {
        position: absolute;
    }

    .fixed-2xs {
        position: fixed;
    }

    .relative-2xs {
        position: relative;
    }

    .static-2xs {
        position: static;
    }

    .sticky-2xs {
        position: sticky;
    }
}

xs styles

position/xs/position.css

/* =========================================================================== *\
   Positioning utilities
\* =========================================================================== */

@media (--m-xs) {
    .absolute-xs {
        position: absolute;
    }

    .fixed-xs {
        position: fixed;
    }

    .relative-xs {
        position: relative;
    }

    .static-xs {
        position: static;
    }

    .sticky-xs {
        position: sticky;
    }
}

sm styles

position/sm/position.css

/* =========================================================================== *\
   Positioning utilities
\* =========================================================================== */

@media (--m-sm) {
    .absolute-sm {
        position: absolute;
    }

    .fixed-sm {
        position: fixed;
    }

    .relative-sm {
        position: relative;
    }

    .static-sm {
        position: static;
    }

    .sticky-sm {
        position: sticky;
    }
}

md styles

position/md/position.css

/* =========================================================================== *\
   Positioning utilities
\* =========================================================================== */

@media (--m-md) {
    .absolute-md {
        position: absolute;
    }

    .fixed-md {
        position: fixed;
    }

    .relative-md {
        position: relative;
    }

    .static-md {
        position: static;
    }

    .sticky-md {
        position: sticky;
    }
}

lg styles

position/lg/position.css

/* =========================================================================== *\
   Positioning utilities
\* =========================================================================== */

@media (--m-lg) {
    .absolute-lg {
        position: absolute;
    }

    .fixed-lg {
        position: fixed;
    }

    .relative-lg {
        position: relative;
    }

    .static-lg {
        position: static;
    }

    .sticky-lg {
        position: sticky;
    }
}

xl styles

position/xl/position.css

/* =========================================================================== *\
   Positioning utilities
\* =========================================================================== */

@media (--m-xl) {
    .absolute-xl {
        position: absolute;
    }

    .fixed-xl {
        position: fixed;
    }

    .relative-xl {
        position: relative;
    }

    .static-xl {
        position: static;
    }

    .sticky-xl {
        position: sticky;
    }
}

2xl styles

position/2xl/position.css

/* =========================================================================== *\
   Positioning utilities
\* =========================================================================== */

@media (--m-2xl) {
    .absolute-2xl {
        position: absolute;
    }

    .fixed-2xl {
        position: fixed;
    }

    .relative-2xl {
        position: relative;
    }

    .static-2xl {
        position: static;
    }

    .sticky-2xl {
        position: sticky;
    }
}

3xl styles

position/3xl/position.css

/* =========================================================================== *\
   Positioning utilities
\* =========================================================================== */

@media (--m-3xl) {
    .absolute-3xl {
        position: absolute;
    }

    .fixed-3xl {
        position: fixed;
    }

    .relative-3xl {
        position: relative;
    }

    .static-3xl {
        position: static;
    }

    .sticky-3xl {
        position: sticky;
    }
}

4xl styles

position/4xl/position.css

/* =========================================================================== *\
   Positioning utilities
\* =========================================================================== */

@media (--m-4xl) {
    .absolute-4xl {
        position: absolute;
    }

    .fixed-4xl {
        position: fixed;
    }

    .relative-4xl {
        position: relative;
    }

    .static-4xl {
        position: static;
    }

    .sticky-4xl {
        position: sticky;
    }
}

5xl styles

position/5xl/position.css

/* =========================================================================== *\
   Positioning utilities
\* =========================================================================== */

@media (--m-5xl) {
    .absolute-5xl {
        position: absolute;
    }

    .fixed-5xl {
        position: fixed;
    }

    .relative-5xl {
        position: relative;
    }

    .static-5xl {
        position: static;
    }

    .sticky-5xl {
        position: sticky;
    }
}