Language selection

Search

Absolute positioning

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to position content on top of other content.

Design and coding

Basic use

Default

Use to control the content position on a page. The browser always positions content on the top left. To modify the default placement, both the x and y position must be defined. The x positions are pstn-lft-* and pstn-rght-*. The y positions are pstn-tp-* and pstn-bttm-*. Since both x and y positions work together, the posting is responsive. When the grid system linearizes for smaller viewports, so does the positioning.

Default positioning CSS
Top positioning Right positioning Bottom positioning Left positioning
  • .pstn-tp-xs = always positioned
  • .pstn-tp-sm = tablets upwards only
  • .pstn-tp-md = small desktop upwards only
  • .pstn-tp-lg = large desktop upwards only
  • .pstn-rght-xs = always positioned
  • .pstn-rght-sm = tablets upwards only
  • .pstn-rght-md = small desktop upwards only
  • .pstn-rght-lg = large desktop upwards only
  • .pstn-bttm-xs = always positioned
  • .pstn-bttm-sm = tablets upwards only
  • .pstn-bttm-md = small desktop upwards only
  • .pstn-bttm-lg = large desktop upwards only
  • .pstn-lft-xs = always positioned
  • .pstn-lft-sm = tablets upwards only
  • .pstn-lft-md = small desktop upwards only
  • .pstn-lft-lg = large desktop upwards only
Appearance
Image of people and trees

Link on top of image
Correct use

Compliance point(s):

  • Use any CSS property other than .static with the layer that's to appear behind the absolute positioned object. For example, grids have a CSS property of position: relative, so they work well with this design component
  • Use to overlay text over an image
  • Ensure the image and text relate to each other
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not overlay text over text
  • Do not overlay text over an image so that the image is no longer visible
Code
<div class="row">
  <div class="col-xs-12">
   <a href="#">
    <img src=".." class="img-responsive full-width" alt="">
    <p class="well brdr-rds-0 well-sm mrgn-bttm-sm mrgn-rght-md mrgn-lft-md opct-90 pstn-bttm-xs pstn-rght-xs">...</p>
   </a>
  </div>
</div>

Enhanced use

Add-on features

Additional add-on features and behaviours are available.

Date modified: