# Absolute Positioning

To position an element absolutely (that is, by coordinates), you need to specify the element's coordinates as well as a reference from where to position it.

With the `absolute-content` module, you can make this dependency obvious by declaring one element as the positioning reference, and another as the positioned content.

More importantly, you can absolutely or statically position elements as needed, based on device state. Because often times, you may want elements placed on top of each other on large displays, but below one another on smaller devices.

1. Usage
2. State-specific Positioning

## Usage

To position an element within another, apply the `absolute-reference` class to the container, and the `absolute-content` class to the content.

For the actual coordinates, set the appropriate `top`, `right`, `bottom`, and `left` CSS properties in the positioned element's `style` attribute.

Absolutely positioned content

    <div class="absolute-reference demo-box-1" style="height: 15em;">
        <div class="absolute-content one-half background-white"
             style="right: 1em;
                    bottom: 1em;">
            This content is positioned <code>1em</code> from the right and <code>1em</code> from the bottom.
        </div>
    </div>

This content is positioned `1em` from the right and `1em` from the bottom.

## State-specific Positioning

Stacking elements doesn't make a lot of sense when the top element eats up most of the available space, which is often the case on small devices.

If you want to absolutely position an element in one state, but not the other, use the appropriate state-prefixed classes.

State-specific Positioning (Resize the browser window to see the effect.)

    <div class="lap-absolute-reference desk-absolute-reference">
        <div class="demo-box-1" style="height: 15em;">
            This container is a sibling of the positioned one.
        </div>
        <div class="lap-absolute-content desk-absolute-content palm-one-whole lap-one-half desk-one-half background-white"
             style="right: 1em;
                    bottom: 1em;">
            This content is placed on top of its sibling on large devices, but below it on smaller ones.
        </div>
    </div>

This container is a sibling of the positioned one.
This content is placed on top of its sibling on large devices, but below it on smaller ones.