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.