component

Position

Utilities for controlling how an element is positioned in the DOM.

Class	Properties
`is-sticky`	position: sticky
`is-absolute`	position: absolute
`is-relative`	position: relative
`is-fixed`	position: fixed

Basic usage

Making use of is-relative and is-absolute classes:

    <div class="is-relative box has-background-primary padding-lg has-text-bold is-color-white">
        <p>Relative parent</p>
        <div class="is-absolute box has-background-secondary padding-sm" style="bottom:-20px">
            <p>Absolute child</p>
        </div>
    </div>

Relative parent

Absolute child

Making an element fixed relative to the browser window with is-fixed layout helper:

    <iframe width="100%" height="200px" srcdoc="
    <html>
        <head>
        <link rel='stylesheet' type='text/css' href='/src/assets/css/rosetta.css'>
        </head>
        <body style='height:500px; background: #fafafa' class='padding-xs'>
            Body
            <div class='is-fixed box has-background-primary padding-lg has-text-bold is-color-white'>
                <p>Fixed element</p>
            </div>
        </body>
    </html>
    ">
    </iframe>