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.
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.
<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>
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.
<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>