Teutonic CSS

Position defaults

←

Here are some shortcut helpers classes to quickly position absolute elements. The parent container needs to have a relative position. Some “translate magic” to deal with unkown sizes of the positioned containers themselves is included.

Syntax: pos-{direction}

SCSS: _position-defaults.scss

.pos-tl

.pos-tr

.pos-bl

.pos-br

.pos-ct

.pos-cr

.pos-cb

.pos-cl

.pos-c

<div class="bg-1 pos-rel height_xl">
  <div class="mini-info pos-tl">.pos-tl</div>
  <div class="mini-info pos-tr">.pos-tr</div>
  <div class="mini-info pos-bl">.pos-bl</div>
  <div class="mini-info pos-br">.pos-br</div>
  <div class="mini-info pos-ct">.pos-ct</div>
  <div class="mini-info pos-cr">.pos-cr</div>
  <div class="mini-info pos-cb">.pos-cb</div>
  <div class="mini-info pos-cl">.pos-cl</div>
  <div class="mini-info pos-c inline">.pos-c</div>
</div>