Cirrus

#Position

New
0.6.0

These are utility classes that control the position of elements.

ClassStyles
u-static
position: static;
u-fixed
position: fixed;
u-absolute
position: absolute;
u-relative
position: relative;
u-sticky
position: sticky;
Supported Pseudo-Variants
New
0.8.0
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited

See more pseudo-variants.

#Examples

Static

Sets the position to static with the u-static class. This is the default position for all HTML elements. Elements flow normally and does not serve as a relative position for any child element.

Static Parent

Absolute Child

<div class="u-round-xs bg-teal-200 u-static">
    <p class="px-2">Static Parent</p>
    <div class="u-round-xs u-shadow-lg bg-teal-300 u-absolute" style="top: 0px; right: 0px;">
        <p class="px-2">Absolute Child</p>
    </div>
</div>
Fixed

Sets the position to fixed with the u-fixed class. This positions the element strictly relative to the location in the screen rather than the location of the page. The perfect example to illustrate is to see how it is used inside the header.

<!-- Look up the code in the header docs -->
Absolute

Sets the position to absolute with the u-absolute-fixed class. This makes the neighboring elements ignore the u-absolute element when positioning themselves.

Relative Parent

Static Parent

Absolute Child

Static Child

<div class="u-round-xs bg-teal-200 u-relative px-2">
    <p>Relative Parent</p>
    <div class="u-round-xs u-shadow-lg bg-teal-300 u-static">
        <p class="px-2">Static Parent</p>
        <div class="u-round-xs u-shadow-lg bg-teal-400 u-absolute" style="top: 0px; right: 0px;">
            <p class="px-2">Absolute Child</p>
        </div>
        <div class="u-round-xs u-shadow-lg bg-teal-400 px-2 u-inline-block">
            <p>Static Child</p>
        </div>
    </div>
</div>
Relative

Sets the position to relative with the u-relative-fixed class. The element with u-relative will serve as the element to calculate offsets from by all of its children.

Relative Parent

Absolute Child

<div class="u-round-xs bg-teal-200 u-relative px-2" style="height: 200px;">
    <p>Relative Parent</p>
    <div class="u-round-xs u-shadow-lg bg-teal-300 u-absolute" style="bottom: 0px; right: 0px;">
        <p class="px-2">Absolute Child</p>
    </div>
</div>
Sticky

Set the u-sticky class to make the element display with sticky.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

<div style="height: 200px; overflow: auto;">
    <div>
        <div class="u-sticky u-round-sm px-1 bg-teal-300 u-top-0">
            <p>Heading 1</p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
    <div>
        <div class="u-sticky u-round-sm px-1 bg-teal-300 u-top-0">
            <p>Heading 2</p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
    <div>
        <div class="u-sticky u-round-sm px-1 bg-teal-300 u-top-0">
            <p>Heading 3</p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
    <div>
        <div class="u-sticky u-round-sm px-1 bg-teal-300 u-top-0">
            <p>Heading 4</p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
    <div>
        <div class="u-sticky u-round-sm px-1 bg-teal-300 u-top-0">
            <p>Heading 5</p>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
</div>

#Responsive

New
0.6.2

All utility classes mentioned here support viewport based application. All you need to do is add a <viewport>:<class> at the end of the class(es) you are using. For example, use md:u-relative to apply u-relative on medium screens and above.

<div class="u-absolute md:u-relative">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.