#Position

Added

0.6.0

These are utility classes that control the position of elements.

Class	Styles
`u-static`	`position: static;`
`u-fixed`	`position: fixed;`
`u-absolute`	`position: absolute;`
`u-relative`	`position: relative;`
`u-sticky`	`position: sticky;`

#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 bg-pink-200 u-static">
    <p class="px-2">Static Parent</p>
    <div class="u-round bg-pink-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 bg-pink-200 u-relative px-2">
    <p>Relative Parent</p>
    <div class="u-round bg-pink-300 u-static">
        <p class="px-2">Static Parent</p>
        <div class="u-round bg-pink-400 u-absolute" style="top: 0px; right: 0px;">
            <p class="px-2">Absolute Child</p>
        </div>
        <div class="u-round bg-pink-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 bg-pink-200 u-relative px-2" style="height: 200px;">
    <p>Relative Parent</p>
    <div class="u-round bg-pink-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

Heading 3

Heading 4

Heading 5

<div style="height: 200px; overflow: auto;">
    <div>
        <div class="u-sticky bg-purple-300" style="top: 0px;">
            <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 bg-purple-300" style="top: 0px;">
            <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 bg-purple-300" style="top: 0px;">
            <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 bg-purple-300" style="top: 0px;">
            <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 bg-purple-300" style="top: 0px;">
            <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> at the end of the class(es) you are using. For example, use u-relative-md to apply u-relative on medium screens and above.

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

For more information, visit the Viewports documentation.

Cirrus

#Position

#Examples

Static

Fixed

Absolute

Relative

Sticky

#Responsive

Overflow